Funkwhale UI

Appearance

ts
import Link from '~/ui/Link.vue'

Link ​

Navigates the user to a new location, either internally via Vue Router or externally.

ts
const {
  is = 'a',
  uiNoUnderline = undefined,
  ...props
} = defineProps<WithAttributes<{
  /**
    * Pass `RouterLink` or use the `to()` helper
    * @default `<a>` tag
    */
  is?: Component | 'a'

  /**
    * Indicates the element that is visually and semantically current when the element is part of a nav.
    * Use 'step' for multi-part wizards, use 'location' for `#xy` anchors, otherwise use 'page'.
    * - `true`: Current.
    * - `'page'`: Current page.
    * - `'step'`: Current step in a multi-step process.
    * - `'location'`: Current location within an environment or context.
    * @see https://www.w3.org/TR/wai-aria-1.2/#aria-current
    */
  ariaCurrent?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean
  ariaDescribedby?: string
  ariaDisabled?: 'true' | 'false' | boolean

  class: {
    align?: 'align-start' | 'align-stretch'
    justify?: 'justify-start'
    color?: `${'color-primary' | 'color-destructive' | 'color-default' | 'color-blue'}${'' | '-solid' | '-ghost'}`
    shape?: 'shape-circle' | 'shape-square' | 'shape-field' | 'shape-field-grow' | 'shape-field-full'
  }

  uiBlockSize?: '24' | '40' | '48'
  uiNoUnderline?: boolean
} & Labeled>>()
template
Access your personal music collection from anywhere.
Funkwhale supports <Link
  href="https://funkwhale.audio/"
>
  advanced sharing features
</Link> to promote Freely licensed content.

Routing ​

ts
import { to } from '~/routing'
template
<nav
  class="layout-row"
  ui-gap="16"
>
  <Link
    class="color-primary-solid shape-field-grow"
    v-bind="to({ name: '' })"
  >
    Home
  </Link>
  <Link
    v-bind="to({ name: 'library.artists' })"
  >
    Artists
  </Link>
  <Link
    v-bind="to({ name: 'library.albums' })"
  >
    Albums
  </Link>
  <Link v-bind="to({ name: '' })">
    More...
  </Link>
</nav>

A11y Checklist ​

Access your personal music collection from anywhere. Funkwhale supports advanced sharing features to promote Freely licensed content.

template
<p
  class="shape-card padding-large"
  style="background-color: var(--color-background)"
  ui-inline-size="288"
>
  Access your personal music collection from anywhere.
  Funkwhale supports <Link
    href="https://funkwhale.audio/"
  >
    advanced sharing features
  </Link> to promote Freely licensed content.
</p>
<nav
  class="layout-row"
  ui-gap="16"
>
  <Link
    class="color-primary-solid shape-field-grow"
    v-bind="to({ name: '' })"
  >
    Home
  </Link>
  <Link
    v-bind="to({ name: 'library.artists' })"
  >
    Artists
  </Link>
  <Link
    v-bind="to({ name: 'library.albums' })"
  >
    Albums
  </Link>
  <Link v-bind="to({ name: '' })">
    More...
  </Link>
</nav>

Test this component in isolation against WCAG2 criteria