---

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`: 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

```vue
<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

```vue
<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.

```vue
<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>
```