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:

• 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 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>