@empathyco/x-components
Version:
Empathy X Components
74 lines (56 loc) • 2.29 kB
Markdown
---
title: BaseIdTogglePanelButton
---
# BaseIdTogglePanelButton
Component containing an event button that emits
XEventsTypes.UserClickedPanelToggleButton when clicked with
the panelId as payload.
It has a default slot to customize its contents.
## Props
| Name | Description | Type | Default |
| -------------------- | -------------------------------------------------- | ------------------- | ------------- |
| <code>panelId</code> | The panelId to use for the toggle event listeners. | <code>string</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | (Required) Button content with a text, an icon or both | |
## Events
A list of events that the component will emit:
- [`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 example
The component renders content passed to the default slot and toggles the panel with panelId
`myToggle`.
```vue
<template>
<div>
<BaseIdTogglePanelButton panelId="myToggle" v-slot="{ isPanelOpen }">
<template v-if="isPanelOpen">
<img src="./close-button-icon.svg" alt="Close aside" />
<span>Close aside</span>
</template>
<template v-else>
<img src="./open-button-icon.svg" alt="Open aside" />
<span>Open aside</span>
</template>
</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>
```