@empathyco/x-components
Version:
Empathy X Components
82 lines (63 loc) • 2.38 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 rendering content passed to the default slot and opening the panel toggle with panelId
`my-toggle`.
```vue
<template>
<div>
<BaseIdTogglePanelButton v-slot="{ isPanelOpen }" panelId="myToggle">
<template #default="{ isPanelOpen }" v-if="isPanelOpen">
<img src="./close-button-icon.svg" />
<span>Close aside</span>
</template>
<template v-else>
<img src="./open-button-icon.svg" />
<span>Open aside</span>
</template>
</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>
```