@empathyco/x-components
Version:
Empathy X Components
108 lines (84 loc) • 3.87 kB
Markdown
---
title: 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 |
| --------------------------- | ----------------------------------------------------------------------- | -------------------------- | ------------------------------ |
| <code>animation</code> | Animation component that will be used to animate the base-toggle-panel. | <code>AnimationProp</code> | <code>() => NoAnimation</code> |
| <code>startCollapsed</code> | Handles if the panel is open by default. | <code>boolean</code> | <code></code> |
| <code>headerClass</code> | Class inherited by content element. | <code>string</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| --------------------------- | --------------------------------------------------------------- | ----------------------------------------- |
| <code>header</code> | (Required) Slot that is be used for replacing the whole header. | <br /> |
| <code>header-content</code> | (Required) Slot used to just pass the content. | |
| <code>default</code> | (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
```vue
<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
```vue
<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.
```vue
<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>
```