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>