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>