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>