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.	AnimationProp	() => NoAnimation
startCollapsed	Handles if the panel is open by default.	boolean
headerClass	Class inherited by content element.	string

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: emitted after the user clicks the element and opens it.
• close: emitted after the user clicks the element and closes it.

Examples

Toggle panel which uses the base toggle panel, adds a header and manages the open/close state of the panel.

Basic usage

<template>
  <BaseHeaderTogglePanel :animation="animation" :start-collapsed="false">
    <template #header-content="{ open }">
      <p>Header, open: {{ open ? 'close' : 'open' }}</p>
    </template>
    <template #default>
      <p>Default content</p>
    </template>
  </BaseHeaderTogglePanel>
</template>
<script setup>
import { BaseHeaderTogglePanel } from '@empathyco/x-components'
import { CollapseHeight } from '@empathyco/x-components/animations'
const animation = CollapseHeight
</script>

Custom header

<template>
  <BaseHeaderTogglePanel :animation="animation" :start-collapsed="true">
    <template #header="{ toggleOpen, open }">
      <p>Header, open: {{ open ? 'close' : 'open' }}</p>
      <button @click="toggleOpen">Toggle</button>
    </template>
    <template #default>
      <p>Default content</p>
    </template>
  </BaseHeaderTogglePanel>
</template>
<script setup>
import { BaseHeaderTogglePanel } from '@empathyco/x-components'
import { CollapseHeight } from '@empathyco/x-components/animations'
const animation = CollapseHeight
</script>

Customizing default header with classes

The headerClass prop can be used to add classes to the header of the toggle panel.

<template>
  <BaseHeaderTogglePanel headerClass="custom-class" :animation="animation" :start-collapsed="false">
    <template #header-content="{ open }">
      <p>Header, open: {{ open ? 'close' : 'open' }}</p>
    </template>
    <template #default>
      <p>Default content</p>
    </template>
  </BaseHeaderTogglePanel>
</template>
<script setup>
import { BaseHeaderTogglePanel } from '@empathyco/x-components'
import { CollapseHeight } from '@empathyco/x-components/animations'
const animation = CollapseHeight
</script>