Accordion

1<script setup lang="ts">2import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const sections = [6    { value: 'general', title: 'General', body: 'Language, region and the start page.' },7    { value: 'appearance', title: 'Appearance', body: 'Theme, accent colour and density.' },8    { value: 'privacy', title: 'Privacy & security', body: 'Permissions, history and what is shared.' },9    { value: 'updates', title: 'Updates', body: 'Channel and when to install.', disabled: true }10];11 12const single = ref<string | number | (string | number)[] | null>('general');13</script>14 15<template>16    <Accordion v-model:value="single" style="width: 100%">17        <AccordionPanel v-for="s in sections" :key="s.value" :value="s.value" :disabled="s.disabled">18            <AccordionHeader>{{ s.title }}</AccordionHeader>19            <AccordionContent>20                <p style="margin: 0">{{ s.body }}</p>21            </AccordionContent>22        </AccordionPanel>23    </Accordion>24    <small style="color: var(--vt-text-muted-color)">value: {{ single ?? 'null' }}</small>25</template>

1<script setup lang="ts">2import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const sections = [6    { value: 'general', title: 'General', body: 'Language, region and the start page.' },7    { value: 'appearance', title: 'Appearance', body: 'Theme, accent colour and density.' },8    { value: 'privacy', title: 'Privacy & security', body: 'Permissions, history and what is shared.' }9];10 11const several = ref<string | number | (string | number)[] | null>(['general', 'privacy']);12</script>13 14<template>15    <Accordion v-model:value="several" multiple style="width: 100%">16        <AccordionPanel v-for="s in sections" :key="s.value" :value="s.value">17            <AccordionHeader>{{ s.title }}</AccordionHeader>18            <AccordionContent>19                <p style="margin: 0">{{ s.body }}</p>20            </AccordionContent>21        </AccordionPanel>22    </Accordion>23    <small style="color: var(--vt-text-muted-color)">value: {{ several }}</small>24</template>