Vitral 0.2
Panel

Accordion

Stacked sections that open and close, one at a time or several at once, with headers that follow the WAI-ARIA accordion.

WAI-ARIA tested

Import

main.ts
import { Accordion } from '@vitral/vue';

One open at a time

Language, region and the start page.

value: general
<script setup lang="ts">import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from '@vitral/vue';import { ref } from 'vue'; const sections = [    { value: 'general', title: 'General', body: 'Language, region and the start page.' },    { value: 'appearance', title: 'Appearance', body: 'Theme, accent colour and density.' },    { value: 'privacy', title: 'Privacy & security', body: 'Permissions, history and what is shared.' },    { value: 'updates', title: 'Updates', body: 'Channel and when to install.', disabled: true }]; const single = ref<string | number | (string | number)[] | null>('general');</script> <template>    <Accordion v-model:value="single" style="width: 100%">        <AccordionPanel v-for="s in sections" :key="s.value" :value="s.value" :disabled="s.disabled">            <AccordionHeader>{{ s.title }}</AccordionHeader>            <AccordionContent>                <p style="margin: 0">{{ s.body }}</p>            </AccordionContent>        </AccordionPanel>    </Accordion>    <small style="color: var(--vt-text-muted-color)">value: {{ single ?? 'null' }}</small></template>

Multiple

Language, region and the start page.

Permissions, history and what is shared.

value: [ "general", "privacy" ]
<script setup lang="ts">import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from '@vitral/vue';import { ref } from 'vue'; const sections = [    { value: 'general', title: 'General', body: 'Language, region and the start page.' },    { value: 'appearance', title: 'Appearance', body: 'Theme, accent colour and density.' },    { value: 'privacy', title: 'Privacy & security', body: 'Permissions, history and what is shared.' }]; const several = ref<string | number | (string | number)[] | null>(['general', 'privacy']);</script> <template>    <Accordion v-model:value="several" multiple style="width: 100%">        <AccordionPanel v-for="s in sections" :key="s.value" :value="s.value">            <AccordionHeader>{{ s.title }}</AccordionHeader>            <AccordionContent>                <p style="margin: 0">{{ s.body }}</p>            </AccordionContent>        </AccordionPanel>    </Accordion>    <small style="color: var(--vt-text-muted-color)">value: {{ several }}</small></template>

Custom icons

A Vue 3 component library with a theme engine of its own.

<script setup lang="ts">import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from '@vitral/vue';</script> <template>    <Accordion value="a" expand-icon="plus" collapse-icon="minus" style="width: 100%">        <AccordionPanel value="a">            <AccordionHeader>What is Vitral?</AccordionHeader>            <AccordionContent>A Vue 3 component library with a theme engine of its own.</AccordionContent>        </AccordionPanel>        <AccordionPanel value="b">            <AccordionHeader>Does it work unstyled?</AccordionHeader>            <AccordionContent>Yes: every part takes pass-through, and `unstyled` drops the built-in classes.</AccordionContent>        </AccordionPanel>    </Accordion></template>

API

Read from packages/vue/src/components/Accordion/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
multiplebooleanLet several panels be open at once; `value` is then an array.
lazybooleanRender a panel's content only while it is open.
headingLevelnumberThe level of the heading each header button sits in. Defaults to 3; set it to fit the page outline.
expandIconIconPropShown on a closed panel instead of the chevron.
collapseIconIconPropShown on an open panel instead of the chevron.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Slots

NameSlot propsDescription
default——

Used in these templates