4.8 KiB

Raw Blame History

import Link from "~/components/ui/Link.vue"

Link

Users can navigate by following Links. They expect that in contrast to clicking a button, following a link does not manipulate items or trigger any action.

This component will render as an <a> element [MDN].


<Link to="/">
  Home
</Link>

Home

Instead of a route, you can set the prop to to any web address starting with http.

`Active` states

If any ancestor path matches, the .router-link-active class is added
If the whole path matches, the .router-link-exact-active class is added

See the Vue docs for a primer on Path matching.

In addition to the standard Vue RouterLink path matching function, we use this algorithm:

If the destination of the link contains any query parameter and none of these is set (i.e. they are all undefined), then the class .router-link-no-matching-query-flags is added.

This is particularly useful for modals.

Open modal

Colors and Variants

See Using color

A paragraph of text with an inline (uncolored) link: no color

default primary secondary destructive default solid primary solid secondary solid destructive solid

Only use on top of solid surfaces, else the text may be unreadable!

{{ color }} outline default ghost primary ghost secondary ghost destructive ghost

Shapes

<Link primary solid round to="/">
  Home
</Link>

Home

Set width and alignment

See Using width and Using alignment.

  <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>

min-content tiny buttonWidth small medium full auto

🐌 🐌 🐌

4.8 KiB Raw Blame History