1 min read
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 |
---|---|---|---|
startOpen | Shows the panel open at the beginning or not, depending on its state. | boolean | true |
animation | Animation component that will be used to animate the panel content. | Vue | () => NoElement |
panelId | The id to link with the BaseIdTogglePanelButton. Both components must use the same Id to make them interact. | string |
|
Slots
Name | Description | Bindings (name - type - description) |
---|---|---|
default | (Required) Default content | None |
Events
A list of events that the component will watch:
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 usage
Using default slot:
<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>