9.7 KiB

Czysty Bezpośredni odnośnik Wina Historia

layout
page

::: warning

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

:::

import Toc from "@ui/Toc.vue"

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.

Prop	Data type	Required?	Description
`heading`	Enum<String>	No	The heading level rendered in the table of contents

::: details Supported headings

h1
h2
h3
h4
h5
h6

:::

Default

By default table of contents only renders <h1> tags

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

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

This is a Table of Contents

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.

Unde praesentium voluptates esse in placeat. Quis qui sint illo tempore omnis sed. Ab dicta omnis aut dolor voluptate maxime repudiandae ea. Aspernatur alias et architecto asperiores in. A sunt necessitatibus voluptatem veniam at dolore. Dolorum saepe est eveniet dignissimos laborum.

Qui impedit dicta earum. Qui repudiandae est magnam. Illum sit ratione exercitationem fugiat aut tempore. Ut sit deserunt ratione ut architecto deleniti ea magnam. Voluptatibus dignissimos voluptatem rem fugiat.

It automatically generates from headings

Heading h1 - A

Heading h1 - B

Heading h2 - C

Heading h1 - D

Custom headings

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

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

This is a Table of Contents

Content...

It automatically generates from headings

Accessible toggle

Test this component in isolation against WCAG2 criteria

This component is currently undergoing renovation. Check back later.

:::

9.7 KiB Czysty Bezpośredni odnośnik Wina Historia

Table of Contents

Default

This is a Table of Contents

It automatically generates from headings

Heading h1 - A

Heading h1 - B

Heading h2 - C

Heading h1 - D

Custom headings

This is a Table of Contents

It automatically generates from headings

Accessible toggle

A11y Checklist

9.7 KiB

Czysty Bezpośredni odnośnik Wina Historia