Panel

1<script setup lang="ts">2import { Panel } from '@vitral/vue';3</script>4 5<template>6    <Panel header="Header" style="width: 100%">7        <p style="margin: 0">A panel groups content under a header. Without `toggleable` the header is plain text.</p>8    </Panel>9</template>

1<script setup lang="ts">2import { Button, Panel } from '@vitral/vue';3</script>4 5<template>6    <Panel header="Storage" toggleable style="width: 100%">7        <template #icons>8            <Button icon="refresh" variant="text" severity="secondary" size="small" aria-label="Refresh" />9            <Button icon="moreHorizontal" variant="text" severity="secondary" size="small" aria-label="More options" />10        </template>11        <p style="margin: 0">42 GB of 128 GB used. The actions sit outside the toggle button, so each one is its own tab stop.</p>12        <template #footer>13            <small style="color: var(--vt-text-muted-color)">Last synced a minute ago</small>14        </template>15    </Panel>16</template>

1<script setup lang="ts">2import { Panel } from '@vitral/vue';3</script>4 5<template>6    <Panel header="Details" toggleable :collapsed="true" toggle-icon="plus" style="width: 100%">7        <p style="margin: 0">A custom icon replaces the chevron and does not turn over.</p>8    </Panel>9</template>