@phase2/outline-core-link
v0.0.16
Published
The Outline Components for the web link component
Readme
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. |
