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 renders content passed to the default slot and toggles the panel with panelId myToggle.

<template>
  <div>
    <BaseIdTogglePanelButton panelId="myToggle" v-slot="{ isPanelOpen }">
      <template v-if="isPanelOpen">
        <img src="./close-button-icon.svg" alt="Close aside" />
        <span>Close aside</span>
      </template>
      <template v-else>
        <img src="./open-button-icon.svg" alt="Open aside" />
        <span>Open aside</span>
      </template>
    </BaseIdTogglePanelButton>
    <BaseIdTogglePanel :startOpen="true" :animation="animation" panelId="myToggle">
      <div class="x-text1">My toggle</div>
    </BaseIdTogglePanel>
  </div>
</template>
<script setup>
import { BaseIdTogglePanel, BaseIdTogglePanelButton } from '@empathyco/x-components'
import { CollapseFromTop } from '@empathyco/x-components/animations'
const animation = CollapseFromTop
</script>