1 min read
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 |
---|---|---|---|
panelId | The panelId to use for the toggle event listeners. | string |
|
Slots
Name | Description | Bindings (name - type - description) |
---|---|---|
default | (Required) Button content with a text, an icon or both |
Events
A list of events that the component will emit:
UserClickedPanelToggleButton
(opens new window): 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
.
<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>