❤

npm

@phase2/outline-core-link

0.0.16 • Public • Published 5 months ago

outline-core-link

The Outline Core Link component

Properties

Property	Type	Description
`linkHref`	`string`	Link url
`linkRel`	`LinkRelType`	Link rel
`linkTarget`	`LinkTargetType`	Link target
`linkText`	`string`	Link text

Methods

Method	Type	Description
`isURLExternal`	`(url: string): boolean`	Check to see if the link is external, pass target="_blank" and rel="external" if so. Returns true if the link is external.
`linkRelRender`	`(): string \| undefined`	You can override Rel manually, but if not, we'll set it to "noreferrer noopener" if the link is external. Tabnabbing vulnerability 🤯 TLDR: when a link has the attribute target="_blank", always add ref="noreferrer noopener" https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#tabnabbing
`linkTargetRender`	`(): string \| undefined`	You can override target manually, but if not, we'll set it to "_blank" if the link is external.

Slots

Name	Description
	The default slot for this element.

CSS Custom Properties

Property	Description
`--outline-core-link-color`	default: The default link color.
`--outline-core-link-color-default`	decoration: Text decoration for the default link.
`--outline-core-link-color-hover`	decoration: Text decoration for the link when hovering.
`--outline-core-link-transition`	property: The CSS transition property to use for the link.
`--outline-core-link-transition-timing`	function: The CSS transition timing function to use for the link.

outline-core-link

The Outline Core Link component

Properties

Property	Attribute	Type	Description
`linkHref`	`link-href`	`string`	Link url
`linkRel`	`link-rel`	`LinkRelType`	Link rel
`linkTarget`	`link-target`	`LinkTargetType`	Link target
`linkText`	`link-text`	`string`	Link text

Methods

Method	Type	Description
`isURLExternal`	`(url: string): boolean`	Check to see if the link is external, pass target="_blank" and rel="external" if so. Returns true if the link is external.
`linkRelRender`	`(): string \| undefined`	You can override Rel manually, but if not, we'll set it to "noreferrer noopener" if the link is external. Tabnabbing vulnerability 🤯 TLDR: when a link has the attribute target="_blank", always add ref="noreferrer noopener" https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#tabnabbing
`linkTargetRender`	`(): "_blank" \| "_self" \| "_parent" \| "_top" \| undefined`	You can override target manually, but if not, we'll set it to "_blank" if the link is external.

Slots

Name	Description
	The default slot for this element.

CSS Custom Properties

Property	Description
`--outline-core-link-color`	default: The default link color.
`--outline-core-link-color-default`	decoration: Text decoration for the default link.
`--outline-core-link-color-hover`	decoration: Text decoration for the link when hovering.
`--outline-core-link-transition`	property: The CSS transition property to use for the link.
`--outline-core-link-transition-timing`	function: The CSS transition timing function to use for the link.

Readme

Keywords

Package Sidebar

Install

npm i @phase2/outline-core-link

Repository

github.com/phase2/outline

Homepage

github.com/phase2/outline/tree/next/packages/components/outline-core-link

Weekly Downloads

106

Version

0.0.16

License

BSD-3-Clause

Unpacked Size

58.3 kB

Total Files

17

Last publish

5 months ago

Collaborators

Try on RunKit

Report malware