@empathyco/x-components
Version:
Empathy X Components
98 lines (74 loc) • 3.51 kB
Markdown
---
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>
```