---

title: BaseIdTogglePanel

---

# BaseIdTogglePanel

Simple panel that could receives its initial open state via prop, if not the default is opens and a
required prop, named `panelId`, which are responsible of rendering default slot inside a
configurable transition.

It reacts to `UserClickedPanelToggleButton` event, when their payload matches the component's
'panelId' prop, to handle its open/close state.

The default slot offers the possibility to customise the modal content.

## Props

| Name                   | Description                                                                                                       | Type                       | Default                        |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------------------ |
| <code>startOpen</code> | Shows the panel open at the beginning or not, depending on its state.                                             | <code>boolean</code>       | <code>true</code>              |
| <code>animation</code> | Animation component that will be used to animate the panel content.                                               | <code>AnimationProp</code> | <code>() => NoAnimation</code> |
| <code>panelId</code>   | The id to link with the BaseIdTogglePanelButton.<br />Both components must use the same Id to make them interact. | <code>string</code>        | <code></code>                  |

## Slots

| Name                 | Description                | Bindings<br />(name - type - description) |
| -------------------- | -------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) Default content | None                                      |

## Events

A list of events that the component will watch:

- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the button. The event payload is the id of the panelId
  that is going to be toggled.

## Examples

### Basic usage

Using default slot:

```vue
<template>
  <div>
    <BaseIdTogglePanelButton panelId="myToggle">
      <img src="./open-button-icon.svg" />
      <span>Toggle Aside</span>
    </BaseIdTogglePanelButton>
    <BaseIdTogglePanel :startOpen="true" :animation="animation" panelId="myToggle">
      <div class="x-text1">My toggle</div>
    </BaseIdTogglePanel>
  </div>
</template>

<script>
  import {
    BaseIdTogglePanel,
    BaseIdTogglePanelButton,
    CollapseFromTop
  } from '@empathyco/x-components';

  export default {
    components: {
      BaseIdTogglePanel,
      BaseIdTogglePanelButton,
      CollapseFromTop
    },
    data: function () {
      return {
        animation: CollapseFromTop
      };
    }
  };
</script>
```