BaseTabsPanel

Base Tabs Panel.

Props

Name	Description	Type	Default
tabsAnimation	Animation component that will be used to animate the tabs list.	union	'header'
contentAnimation	Animation component that will be used to animate the selected tab content.	union	() => NoElement
initialTab	The tab to be initially selected.	string	''
allowTabDeselect	Allows the tabs to be unselected.	boolean	false

Slots

Name	Description	Bindings (name - type - description)
tab	Slot used to replace the whole tab.	tab string - The tab name. isSelected boolean - Indicates if the tab is selected. select function - Function to select the tab.
tab-content	Slot used to just pass the content.	tab string - The tab name. isSelected boolean - Indicates if the tab is selected.
selectedTab	Slot used to display the selected tab content.	tab string - This content's tab name. selectTab function - Function to select a tab. deselectTab function - Function to deselect the tab.

Events

This component emits no events.

Examples

This component renders a list of tabs based on the name of the slots passed on its template. By default, the name of each slot will be used as tab label. If an initial tab is passed by prop, the content of its correspondent slot will displayed in a panel. Otherwise, no content will be displayed until a tab is selected.

Basic example

It renders a list of tabs and, when a tab is clicked, a panel with its content will be displayed.

<template>
  <BaseTabsPanel>
    <template #summer>
      <div>Summer Top Sales</div>
    </template>
    <template #fall>
      <div>Fall Top Sales</div>
    </template>
    <template #outlet>
      <div>Outlet Top Sales</div>
    </template>
  </BaseTabsPanel>
</template>
<script>
  import { BaseTabsPanel } from '@empathyco/x-components';
  export default {
    name: 'BaseTabsPanelDemo',
    components: {
      BaseTabsPanel
    }
  };
</script>

Play with props

Define the tab to be initially opened

By default, no tab is selected so any panel is displayed. The initialTab prop allows to indicate which tab should be opened at first.

<template>
  <BaseTabsPanel initialTab="summer">
    <template #summer>
      <div>Summer Top Sales</div>
    </template>
    <template #fall>
      <div>Fall Top Sales</div>
    </template>
    <template #outlet>
      <div>Outlet Top Sales</div>
    </template>
  </BaseTabsPanel>
</template>
<script>
  import { BaseTabsPanel } from '@empathyco/x-components';
  export default {
    name: 'BaseTabsPanelDemo',
    components: {
      BaseTabsPanel
    }
  };
</script>

Allowing tabs deselection

The prop allowTabDeselect allows the tabs to be deselected. When a tab that is already selected is clicked again, the tab will be deselected and no panel content will be displayed. By default, this behavior is deactivated.

<template>
  <BaseTabsPanel initialTab="summer" allowTabDeselect>
    <template #summer>
      <div>Summer Top Sales</div>
    </template>
    <template #fall>
      <div>Fall Top Sales</div>
    </template>
    <template #outlet>
      <div>Outlet Top Sales</div>
    </template>
  </BaseTabsPanel>
</template>
<script>
  import { BaseTabsPanel } from '@empathyco/x-components';
  export default {
    name: 'BaseTabsPanelDemo',
    components: {
      BaseTabsPanel
    }
  };
</script>

Customizing the content with classes

• The activeTabClass prop can be used to add classes to the active tab button.
• The contentClass prop can be used to add classes to the content.
• The tabClass prop can be used to add classes to the tab buttons.
• The tabsListClass prop can be used to add classes to the tabs list.

<template>
  <BaseTabsPanel
    activeTabClass="x-button-auxiliary"
    contentClass="x-p-12 x-bg-auxiliary-25"
    tabClass="x-button-ghost"
    tabListClass="x-flex-col"
  >
    <template #summer>
      <div>Summer Top Sales</div>
    </template>
    <template #fall>
      <div>Fall Top Sales</div>
    </template>
    <template #outlet>
      <div>Outlet Top Sales</div>
    </template>
  </BaseTabsPanel>
</template>
<script>
  import { BaseTabsPanel } from '@empathyco/x-components';
  export default {
    name: 'BaseTabsPanelDemo',
    components: {
      BaseTabsPanel
    }
  };
</script>

Play with the animations

• The tabsAnimation prop can be used to animate the tabs list.
• The contentAnimation prop can be used to animate the selected tab content.

<template>
  <BaseTabsPanel :tabsAnimation="staggeredFadeAndSlide" :contentAnimation="staggeredFadeAndSlide">
    <template #summer>
      <div>Summer Top Sales</div>
    </template>
    <template #fall>
      <div>Fall Top Sales</div>
    </template>
  </BaseTabsPanel>
</template>
<script>
  import { BaseTabsPanel, StaggeredFadeAndSlide } from '@empathyco/x-components';
  export default {
    name: 'BaseTabsPanelDemo',
    components: {
      BaseTabsPanel
    },
    data() {
      return {
        staggeredFadeAndSlide: StaggeredFadeAndSlide
      };
    }
  };
</script>

Overriding the slots

Customizing the tab button

By default, the component is rendering a button for each tab to be displayed. This button can be replaced entirely through the tab slot.

<template>
  <BaseTabsPanel>
    <template #tab="{ tab, isSelected, select }">
      <CheckIcon v-if="isSelected" />
      This is the {{ tab }} tab.
      <button @click="select">Open tab</button>
    </template>
    <template #summer>
      <div>Summer Top Sales</div>
    </template>
    <template #fall>
      <div>Fall Top Sales</div>
    </template>
    <template #outlet>
      <div>Outlet Top Sales</div>
    </template>
  </BaseTabsPanel>
</template>
<script>
  import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components';
  export default {
    name: 'BaseTabsPanelDemo',
    components: {
      BaseTabsPanel,
      CheckIcon
    }
  };
</script>

Customizing the tab button content

Alternatively to the previous example, instead of changing the whole tab button, the slot tab-content offers the possibility of changing just its contents.

<template>
  <BaseTabsPanel>
    <template #tab-content="{ tab, isSelected }">
      <CheckIcon v-if="isSelected" />
      {{ tab }}
    </template>
    <template #summer>
      <div>Summer Top Sales</div>
    </template>
    <template #fall>
      <div>Fall Top Sales</div>
    </template>
    <template #outlet>
      <div>Outlet Top Sales</div>
    </template>
  </BaseTabsPanel>
</template>
<script>
  import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components';
  export default {
    name: 'BaseTabsPanelDemo',
    components: {
      BaseTabsPanel,
      CheckIcon
    }
  };
</script>

Customizing the tab panel content

The displayed tab name and a method to select a tab are exposed to the tab panel content slot.

<template>
  <BaseTabsPanel>
    <template #summer="{ tab, selectTab, deselectTab }">
      <h1>{{ tab }}</h1>
      <button @click="() => selectTab('fall')">Open Fall</button>
      <button @click="deselectTab">Close tab</button>
    </template>
    <template #fall>
      <div>Fall Top Sales</div>
    </template>
  </BaseTabsPanel>
</template>
<script>
  import { BaseTabsPanel } from '@empathyco/x-components';
  export default {
    name: 'BaseTabsPanelDemo',
    components: {
      BaseTabsPanel
    }
  };
</script>