Funkwhale UI

Appearance

WARNING

This component is currently undergoing renovation. Check back later to test it when overhauled.

ts
import Toc from "@ui/Toc.vue"

Table of Contents ​

The table of contents component renders a navigation bar on the right of the screen. Users can click on the items in the contents bar to skip to specific headers.

PropData typeRequired?Description
headingEnum<String>NoThe heading level rendered in the table of contents
Supported headings
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

Default ​

By default table of contents only renders <h1> tags

template
<Toc>
  <h1>This is a Table of Contents</h1>
  Content...

  <h1>It automatically generates from headings</h1>
  More content...
</Toc>

Custom headings ​

You can specify the heading level you want to render in the table of contents by passing it to the heading prop.

template
<Toc
  heading="h3"
>
  <h1>This is a Table of Contents</h1>
  Content...

  <h2>It automatically generates from headings</h2>
  More content...

  <Section h3="Radios">
  <p>
    In expedita ratione consequatur rerum et ullam architecto. Qui ut doloremque laboriosam perferendis corporis voluptatibus voluptates. Ad ducimus adipisci vitae mollitia quis. Aut placeat quaerat maxime velit et eius voluptas fugit. Omnis et et perspiciatis mollitia occaecati.
  </p>
  <p>
    In expedita ratione consequatur rerum et ullam architecto. Qui ut doloremque laboriosam perferendis corporis voluptatibus voluptates. Ad ducimus adipisci vitae mollitia quis. Aut placeat quaerat maxime velit et eius voluptas fugit. Omnis et et perspiciatis mollitia occaecati.
  </p>
  <p>
    In expedita ratione consequatur rerum et ullam architecto. Qui ut doloremque laboriosam perferendis corporis voluptatibus voluptates. Ad ducimus adipisci vitae mollitia quis. Aut placeat quaerat maxime velit et eius voluptas fugit. Omnis et et perspiciatis mollitia occaecati.
  </p>
  </Section>
  <Section h3="Artists">
  <p>
    In expedita ratione consequatur rerum et ullam architecto. Qui ut doloremque laboriosam perferendis corporis voluptatibus voluptates. Ad ducimus adipisci vitae mollitia quis. Aut placeat quaerat maxime velit et eius voluptas fugit. Omnis et et perspiciatis mollitia occaecati.
  </p>
  <p>
    In expedita ratione consequatur rerum et ullam architecto. Qui ut doloremque laboriosam perferendis corporis voluptatibus voluptates. Ad ducimus adipisci vitae mollitia quis. Aut placeat quaerat maxime velit et eius voluptas fugit. Omnis et et perspiciatis mollitia occaecati.
  </p>
  <p>
    In expedita ratione consequatur rerum et ullam architecto. Qui ut doloremque laboriosam perferendis corporis voluptatibus voluptates. Ad ducimus adipisci vitae mollitia quis. Aut placeat quaerat maxime velit et eius voluptas fugit. Omnis et et perspiciatis mollitia occaecati.
  </p>
  </Section>
  <Section h3="Albums">
  <p>
    In expedita ratione consequatur rerum et ullam architecto. Qui ut doloremque laboriosam perferendis corporis voluptatibus voluptates. Ad ducimus adipisci vitae mollitia quis. Aut placeat quaerat maxime velit et eius voluptas fugit. Omnis et et perspiciatis mollitia occaecati.
  </p>
  <p>
    In expedita ratione consequatur rerum et ullam architecto. Qui ut doloremque laboriosam perferendis corporis voluptatibus voluptates. Ad ducimus adipisci vitae mollitia quis. Aut placeat quaerat maxime velit et eius voluptas fugit. Omnis et et perspiciatis mollitia occaecati.
  </p>
  <p>
    In expedita ratione consequatur rerum et ullam architecto. Qui ut doloremque laboriosam perferendis corporis voluptatibus voluptates. Ad ducimus adipisci vitae mollitia quis. Aut placeat quaerat maxime velit et eius voluptas fugit. Omnis et et perspiciatis mollitia occaecati.
  </p>
  </Section>
</Toc>

Using this component

Accessible toggle ​

Test this component in isolation against WCAG2 criteria

A11y Checklist ​

This component is currently undergoing renovation. Check back later.