Tab

ETab is a collection of tab elements pointing to a separate content section or view. The tab bar organizes material across several displays and allows you to navigate between subsections. Demo Here

Usage

The ETab, ETabItem and ETabContent components are used together as below:

Built-in value

// In this approach the ETabItem and ETabContent are linked together based on
their order.

<template>
  <ETab v-model="activeTab">
    <template #tabItems>
      <ETabItem> Item 1</ETabItem>
      <ETabItem> Item 2</ETabItem>
    </template>
    <template #tabContent>
      <ETabContent> Content 1</ETabContent>
      <ETabContent> Content 2</ETabContent>
    </template>
  </ETab>
</template>

<script setup>
  const activeTab = ref(0);
</script>

Custom value

// In this approach the `ETabItem` and `ETabContent` are linked together based
on their custom value.

<template>
  <ETab v-model="activeTab">
    <template #tabItems>
      <ETabItem value="first"> Item 1</ETabItem>
      <ETabItem value="second"> Item 2</ETabItem>
    </template>
    <template #tabContent>
      <ETabContent value="first"> Content 1</ETabContent>
      <ETabContent value="second"> Content 2</ETabContent>
    </template>
  </ETab>
</template>

<script setup>
  const activeTab = ref("second");
</script>

Props

• For ETab component, the following props are available:

Prop	Type	Default	Note
modelValue	[String, Number]	-	Controls selected tab.
vertical	Boolean	false	It organizes your tabs vertically.
square	Boolean	false	Removes rounded corners of the element.
grow	Boolean	false	Makes the tab items expand to fit the full container width.
align	String	"start"	Specifies how the tab items are distributed along the cross axis in a container.
stacked	Boolean	false	Places an icon and text of the ETabItem behind each other on one line vertically.
variant	String	"fill"	The ETab element can be represented in three ways: fill, alternate. alternate displays the chip with a light background.
color	String	"primary"	The given color is applied to the tab - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
headerClasses	String	-	Overrides or extends the header styles.

• For ETabItem component, the following props are available:

Prop	Type	Default	Note
value	Boolean	false	Adds a unique value to each tab bar.
variant	String	"fill"	The ETab element can be represented in three ways: fill, alternate. alternate displays the chip with a light background.
icon	Object	-	By using icon prop the ETabItem element will be visualized with an Icon. More Info about icons here.
id	String	-	HTML id attribute.
color	String	"primary"	The given color is applied to the tab - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
stacked	Boolean	false	Places an icon and text of the ETabItem behind each other on one line vertically.

• For ETabContent component, the following props are available:

Prop	Type	Default	Note
value	Boolean	false	Adds a unique value to each tab bar.
id	String	-	HTML id attribute.

Emits

The ETab component contains following emits.

Emit	Description
update:modelValue	Emitted when the local ref's value is mutated.

Slots

The ETab component provide following slots that enable you to customize the content.

Slot	Description
tabItems	The slot used for the ETabItem element.
tabContent	The slot used for the ETabContent element.

The ETabItem and ETabContent components provide a default slot that enable you to customize the content.

Slot	Description
default	The default Vue slot.