@empathyco/x-components
Version:
Empathy X Components
80 lines (60 loc) • 2.88 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:
- [`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>
```