@3mo/anchor
v1.0.9
Published
A web component for hyperlinks in the theme's accent color, also usable as a link-styled action without an href.
Readme
Anchor
A web component for hyperlinks in the theme's accent color, also usable as a link-styled action without an href.
A link styled in the accent color that navigates like a native anchor, or only fires click without an href.
Installation
npm install @3mo/anchorimport '@3mo/anchor'Usage
<mo-anchor href='https://www.3mo.de' target='_blank'>3MO</mo-anchor>Examples
- In Text — The anchor takes the font of the text around it and only its color from the theme.
- Without Href — Without
hrefit navigates nowhere and only firesclick- for a middle click as well. - Link Attributes —
download,rel,pingandreferrerPolicyare passed on to the native link. - Custom Properties —
--mo-anchor-colorreplaces the accent color.
API
mo-anchor
Properties
| Name | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| href | href | string | "voidHref" | The URL to navigate to. Without it the anchor only fires click. |
| target | target | AnchorSpecialTarget \| (string & {}) \| undefined | | Where to open the URL, such as _blank for a new tab. |
| download | download | string \| undefined | | Downloads the URL instead of navigating, under this file name if one is given. |
| ping | ping | string \| undefined | | Space-separated URLs notified when the link is followed. |
| referrerPolicy | referrerPolicy | string \| undefined | | How much of the referrer to send when the link is followed. |
| rel | rel | string \| undefined | | The relationship to the linked URL, such as noopener. |
Slots
| Name | Description | | --- | --- | | (default) | The content of the anchor. |
CSS custom properties
| Name | Description |
| --- | --- |
| --mo-anchor-color | The link color, the accent color by default. |
Links
License
MIT © 3MO GmbH
