1 min read
BaseHeaderTogglePanel
BaseHeaderTogglePanel
Toggle panel which uses the base toggle panel, adds a header and manage the open / close state of the panel.
Props
Name | Description | Type | Default |
---|---|---|---|
animation | Animation component that will be used to animate the base-toggle-panel. | TSTypeQuery | () => NoElement |
startCollapsed | Handles if the panel is open by default. | boolean | false |
Slots
Name | Description | Bindings (name - type - description) |
---|---|---|
header | (Required) Slot that is be used for replacing the whole header. | |
header-content | (Required) Slot used to just pass the content. | |
default | (Required) Default content. | None |
Events
A list of events that the component will emit:
open
: the event is emitted after the user clicks the element and opens it.close
: the event is emitted after the user clicks the element and closes it.
Examples
Toggle panel which uses the base toggle panel, adds a header and manage the open / close state of the panel.
Basic usage
<BaseHeaderTogglePanel :animation="collapseHeight" :start-collapsed="false">
<template #header-content="{ open }">
<p>Header, open: {{ open ? 'close' : 'open' }}</p>
</template>
<template>
<p>Default content</p>
</template>
</BaseHeaderTogglePanel>
Custom header
<BaseHeaderTogglePanel :animation="collapseHeight" :start-collapsed="true">
<template #header="{ toggleOpen, open }">
<p>Header, open: {{ open ? 'close' : 'open' }}</p>
<button @click="toggleOpen">Toggle</button>
</template>
<template>
<p>Default content</p>
</template>
</BaseHeaderTogglePanel>
Customizing default header with classes
The headerClass
prop can be used to add classes to the header of the toggle panel.
<BaseHeaderTogglePanel
headerClass="custom-class"
:animation="collapseHeight"
:start-collapsed="false"
>
<template #header-content="{ open }">
<p>Header, open: {{ open ? 'close' : 'open' }}</p>
</template>
<template>
<p>Default content</p>
</template>
</BaseHeaderTogglePanel>