121 lines
2.6 KiB
Markdown
121 lines
2.6 KiB
Markdown
<script setup lang="ts">
|
|
import Link from '~/components/ui/Link.vue'
|
|
import Button from '~/components/ui/Button.vue'
|
|
import Layout from '~/components/ui/Layout.vue'
|
|
</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`.
|
|
|
|
## 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>
|
|
|
|
## Width and alignment
|
|
|
|
<Layout flex>
|
|
|
|
```vue-html
|
|
<Link solid primary min-content to="/">min-content</Link>
|
|
<Link solid primary tiny to="/">tiny</Link>
|
|
<Link solid primary buttonWidth to="/">buttonWidth</Link>
|
|
<Link solid primary small to="/">small</Link>
|
|
<Link solid primary medium to="/">medium</Link>
|
|
<Link solid primary full to="/">full</Link>
|
|
<Link solid primary auto to="/">auto</Link>
|
|
<hr />
|
|
<Link solid primary alignSelf="start" to="/">🐌</Link>
|
|
<Link solid primary alignSelf="center" to="/">🐌</Link>
|
|
<Link solid primary alignSelf="end" to="/">🐌</Link>
|
|
<hr />
|
|
<Link solid primary alignText="left" to="/">🐌</Link>
|
|
<Link solid primary alignText="center" to="/">🐌</Link>
|
|
<Link solid primary alignText="right" to="/">🐌</Link>
|
|
```
|
|
|
|
<Layout class="preview" stack style="--gap:4px;">
|
|
<Link solid primary min-content to="/">min-content</Link>
|
|
<Link solid primary tiny to="/">tiny</Link>
|
|
<Link solid primary buttonWidth to="/">buttonWidth</Link>
|
|
<Link solid primary small to="/">small</Link>
|
|
<Link solid primary medium to="/">medium</Link>
|
|
<Link solid primary full to="/">full</Link>
|
|
<Link solid primary auto to="/">auto</Link>
|
|
<hr />
|
|
<Link solid primary alignSelf="start" to="/">🐌</Link>
|
|
<Link solid primary alignSelf="center" to="/">🐌</Link>
|
|
<Link solid primary alignSelf="end" to="/">🐌</Link>
|
|
<hr />
|
|
<Link solid primary alignText="left" to="/">🐌</Link>
|
|
<Link solid primary alignText="center" to="/">🐌</Link>
|
|
<Link solid primary alignText="right" to="/">🐌</Link>
|
|
</Layout>
|
|
</Layout>
|