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:

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>