Import

main.ts

import { Panel } from '@vitral/vue';

Basic

Header

A panel groups content under a header. Without `toggleable` the header is plain text.

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>

Toggleable (Expander)

Press the header, or Tab to it and press Enter or Space, to collapse this content.

collapsed: false

1<script setup lang="ts">2import { Panel } from '@vitral/vue';3import { ref } from 'vue';4 5const collapsed = ref(false);6</script>7 8<template>9    <Panel v-model:collapsed="collapsed" header="Advanced settings" toggleable style="width: 100%">10        <p style="margin: 0">Press the header, or Tab to it and press Enter or Space, to collapse this content.</p>11    </Panel>12    <small style="color: var(--vt-text-muted-color)">collapsed: {{ collapsed }}</small>13</template>

Header actions and footer

42 GB of 128 GB used. The actions sit outside the toggle button, so each one is its own tab stop.

Last synced a minute ago

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>

Custom toggle icon, starting collapsed

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>

API

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

Props

Name	Type	Description
header	string	The header's text.
toggleable	boolean	Makes the header a button that shows and hides the content.
toggleIcon	IconProp	Replaces the chevron. The chevron turns over when open; a custom icon stays as it is.

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

Emits

Event	Payload	Description
toggle	event: PanelToggleEvent	—

Slots

Name	Slot props	Description
header	—	Replaces the `header` text. Inside the toggle button when toggleable, so it must not hold controls of its own.
icons	—	Actions at the end of the header; kept outside the toggle button.
toggleicon	(props: { collapsed: boolean })	—
default	—	—
footer	—	—

Panel

Import

API

Props

Emits

Slots

Related components