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:

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>