@empathyco/x-components/docs/API-reference/components/common/panels/x-components.base-tabs-panel.md

Empathy X Components

---

title: BaseTabsPanel

---

# BaseTabsPanel

Base Tabs Panel.

## Props

| Name                          | Description                                                                | Type                       | Default                        |
| ----------------------------- | -------------------------------------------------------------------------- | -------------------------- | ------------------------------ |
| <code>tabsAnimation</code>    | Animation component that will be used to animate the tabs list.            | <code>AnimationProp</code> | <code>'header'</code>          |
| <code>contentAnimation</code> | Animation component that will be used to animate the selected tab content. | <code>AnimationProp</code> | <code>() => NoAnimation</code> |
| <code>initialTab</code>       | The tab to be initially selected.                                          | <code>string</code>        | <code>''</code>                |
| <code>allowTabDeselect</code> | Allows the tabs to be unselected.                                          | <code>boolean</code>       | <code>false</code>             |
| <code>activeTabClass</code>   | Class inherited by content element.                                        | <code>string</code>        | <code></code>                  |
| <code>contentClass</code>     | Class inherited by content element.                                        | <code>string</code>        | <code></code>                  |
| <code>tabClass</code>         | Class inherited by content element.                                        | <code>string</code>        | <code></code>                  |
| <code>tabsListClass</code>    | Class inherited by content element.                                        | <code>string</code>        | <code></code>                  |

## Slots

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

## 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.

```vue
<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.

```vue
<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.

```vue
<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.

```vue
<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.

```vue
<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.

```vue
<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.

```vue
<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.

```vue
<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>
```