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.	AnimationProp	() => NoAnimation
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 and emit:

• UserClickedPanelToggleButton (opens new window): watched to toggle the panel when the payload matches the panelId prop.
• TogglePanelStateChanged (opens new window): emitted when the internal open state changes, with the new state and panel id.

Examples

Basic usage

<template>
  <div>
    <BaseIdTogglePanelButton panelId="myToggle">
      <img src="./open-button-icon.svg" alt="Toggle Aside" />
      <span>Toggle Aside</span>
    </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>

Listening to state changes

You can listen to the TogglePanelStateChanged event to react to panel open/close state changes:

<template>
  <div>
    <span>Panel is {{ isPanelOpen ? 'open' : 'closed' }}</span>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { use$x } from '@empathyco/x-components'
const x = use$x()
const isPanelOpen = ref(false)
const panelId = 'myToggle'
x.on('TogglePanelStateChanged').subscribe((isOpen, { id }) => {
  if (id === panelId) {
    isPanelOpen.value = isOpen
  }
})
</script>