2024-12-13 13:16:03 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
|
import Link from '~/components/ui/Link.vue'
|
2024-12-17 00:37:37 +00:00
|
|
|
import Button from '~/components/ui/Button.vue'
|
2024-12-13 13:16:03 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
# Link
|
|
|
|
|
|
|
|
|
|
Will render an `<a href...>` element.
|
|
|
|
|
|
|
|
|
|
This component only adds some styles to a `<RouterLink>`.
|
|
|
|
|
|
|
|
|
|
```vue-html
|
|
|
|
|
|
|
|
|
|
<Link to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
<Link to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
Instead of a route, you can set the prop `to` to any web address starting with `http`.
|
2024-12-17 00:37:37 +00:00
|
|
|
|
|
|
|
|
## Colors and Variants
|
|
|
|
|
|
|
|
|
|
###### Solid:
|
|
|
|
|
|
|
|
|
|
<Link primary solid to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
<Link secondary solid to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
<Link destructive solid to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
###### Outline:
|
|
|
|
|
|
|
|
|
|
<Link primary outline to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
<Link secondary outline to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
<Link destructive outline to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
###### Ghost:
|
|
|
|
|
|
|
|
|
|
<Link primary ghost to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
<Link secondary ghost to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
<Link destructive ghost to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
<Button>
|
|
|
|
|
I'm a button
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
|
|
## Shapes
|
|
|
|
|
|
|
|
|
|
<Link primary solid round to="/">
|
|
|
|
|
Home
|
|
|
|
|
</Link>
|
