Funkwhale UI

Appearance

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

Marquee ​

Make content that is too large for its container scroll back and forth. See MDN for the historical inspiration.

ts
defineProps<{
  hoverOnly?: boolean
  pauseOnHover?: boolean
}>()

If you the user wants to be able to scroll, use ui-indicate-overflow instead (see bottom example)

Lorem ipsumDolor sit ametpause-on-hover
Lorem
Very long message
Scroll me... Artists Albums
template
<Marquee pause-on-hover>
  <span>
    <Token>Lorem ipsum</Token>
    <Token>Dolor sit amet</Token>
    <Token>pause-on-hover</Token>
  </span>
</Marquee>
<Marquee>
  <Token>Lorem</Token>
</Marquee>
<Marquee>
  Very long message
</Marquee>
<span
  ui-indicate-overflow
  ui-inline-size="128"
>
  Scroll me...
  <Token v-bind="to({ name: 'library.artists' })">
    Artists
  </Token>
  <Token v-bind="to({ name: 'library.albums' })">
    Albums
  </Token>
</span>