52 lines
1.9 KiB
Markdown
52 lines
1.9 KiB
Markdown
|
# Link
|
||
|
|
|
||
|
|
## Demos
|
||
|
|
|
||
|
|
[[ demo src="/demo/link/default.vue"]]
|
||
|
|
|
||
|
|
## API
|
||
|
|
|
||
|
|
### Props
|
||
|
|
|
||
|
|
| Name | Type | Default | Description |
|
||
|
|
| -- | -- | -- | -- |
|
||
|
|
| `ui` | `string=` | - | [^ui] |
|
||
|
|
| `to` | `string|Object` | - | Denotes the target route of the link. When used with Vue Router, the value will be passed to a [`<router-link>`](https://router.vuejs.org/api/#router-link)'s [`to`](https://router.vuejs.org/api/#to) prop. Otherwise only `string` type is supported, and the value will output to the `href` attribute of an `<a>` element. |
|
||
|
|
| `rel` | `string` | - | Specifies the relationship of the target object to the link object. Refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) for more details. |
|
||
|
|
| `target` | `string` | - | [^target] |
|
||
|
|
| `native` | `boolean` | `false` | Whether to enforce the use of native `<a>` element (instead of `<router-link>`). |
|
||
|
|
| `fallback` | `string` | `'span'` | Specifies the fallback element type when no `to` prop is specified. |
|
||
|
|
| `disabled` | `boolean=` | `false` | Whether the link is disabled. |
|
||
|
|
|
||
|
|
^^^ui
|
||
|
|
Style variants.
|
||
|
|
|
||
|
|
+++Enum values
|
||
|
|
| Value | Description |
|
||
|
|
| -- | -- |
|
||
|
|
| `strong` | Strong style. |
|
||
|
|
| `s` | Small. |
|
||
|
|
| `m` | Medium. |
|
||
|
|
+++
|
||
|
|
^^^
|
||
|
|
|
||
|
|
^^^target
|
||
|
|
Specifies where to display the linked content. Refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) for more details.
|
||
|
|
|
||
|
|
:::tip
|
||
|
|
When `target` has a value of `_blank`, a `noopener` token will be automatically added into `rel` (if not already exist) to enhance safety for free.
|
||
|
|
:::
|
||
|
|
^^^
|
||
|
|
|
||
|
|
### Slots
|
||
|
|
|
||
|
|
| Name | Description |
|
||
|
|
| -- | -- |
|
||
|
|
| `default` | The content of the link. |
|
||
|
|
|
||
|
|
### Events
|
||
|
|
|
||
|
|
| Name | Description |
|
||
|
|
| -- | -- |
|
||
|
|
| `click` | Triggered upon clicks when the `to` prop is falsy or the `native` prop is `true`. The callback parameter list is `(event)`, where the type of `event` is HTML's native [`Event`](https://developer.mozilla.org/en-US/docs/Web/Events/click). |
|