---

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 and emit:

- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  watched to toggle the panel when the payload matches the `panelId` prop.
- [`TogglePanelStateChanged`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  emitted when the internal open state changes, with the new state and panel id.

## Examples

### Basic usage

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

<script setup>
import {
  BaseIdTogglePanel,
  BaseIdTogglePanelButton,
} from "@empathyco/x-components";
import { CollapseFromTop } from "@empathyco/x-components/animations";
const animation = CollapseFromTop;
</script>
```

### Listening to state changes

You can listen to the `TogglePanelStateChanged` event to react to panel open/close state changes:

```vue
<template>
  <div>
    <span>Panel is {{ isPanelOpen ? "open" : "closed" }}</span>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { use$x } from "@empathyco/x-components";

const x = use$x();
const isPanelOpen = ref(false);
const panelId = "myToggle";

x.on("TogglePanelStateChanged").subscribe((isOpen, { id }) => {
  if (id === panelId) {
    isPanelOpen.value = isOpen;
  }
});
</script>
```