MazTabs

MazTabs is a standalone component to display content in tabs with animations

Basic usage

Tab 1

Tab 2

Tab 3

<template>
  <MazTabs>
    <MazTabsBar :items="tabs" />

    <MazTabsContent>
      <MazTabsContentItem :tab="1" class="maz-py-4">
        Tab 1
      </MazTabsContentItem>
      <MazTabsContentItem :tab="2" class="maz-py-4">
        Tab 2
      </MazTabsContentItem>
      <MazTabsContentItem :tab="3" class="maz-py-4">
        Tab 3
      </MazTabsContentItem>
    </MazTabsContent>
  </MazTabs>
</template>

<script lang="ts" setup>
  import MazTabs from 'maz-ui/components/MazTabs'
  import MazTabsBar, { MazTabsBarItem } from 'maz-ui/components/MazTabsBar'
  import MazTabsContent from 'maz-ui/components/MazTabsContent'
  import MazTabsContentItem from 'maz-ui/components/MazTabsContentItem'

  const tabs: MazTabsBarItem[] = [
    { label: 'First Tab', disabled: false },
    { label: 'Second Tab', disabled: false, badge: { color: 'danger', content: 1, roundedSize: 'full' } },
    { label: 'Third Tab', disabled: true },
  ]
</script>

With model-value

Tab 1

Tab 2

Tab 3

View code

<template>
  <MazTabs v-model="currentTab">
    <MazTabsBar :items="tabs" />

    <MazTabsContent>
      <MazTabsContentItem :tab="1" class="maz-py-4">
        Tab 1
      </MazTabsContentItem>
      <MazTabsContentItem :tab="2" class="maz-py-4">
        Tab 2
      </MazTabsContentItem>
      <MazTabsContentItem :tab="3" class="maz-py-4">
        Tab 3
      </MazTabsContentItem>
    </MazTabsContent>
  </MazTabs>

  <br />

  <MazBtn @click="currentTab = currentTab === 1 ? 2 : 1">
    Set model-value to {{currentTab === 1 ? 2 : 1}}
  </MazBtn>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const currentTab = ref(2)

  const tabs: MazTabsBarItem[] = ['First Tab', 'Second Tab', 'Third Tab']
</script>

Persistent tab

To keep the tab current when the page reloads, you can use the persistent props on the component <MazTabsBar />.

The component will save the current table index in the URL of the page via a query parameter.

You can choose the name of this query parameter with the props query-param @default 'tab'

Tab 1

Tab 2

Tab 3

Custom tabs with slot

<MazTabs>
  <MazTabsBar :items="tabs">
    <template #item="{ item, index, active }">
      {{ item.label }}

      <MazBadge
        size="0.6rem"
        rounded-size="full"
        :color="active ? 'primary' : 'gray'"
      >
        {{ index }}
      </MazBadge>
    </template>
  </MazTabsBar>
</MazTabs>

Types

type MazTabsBarItem =
  | {
      label: string
      disabled?: boolean
      badge?: {
        content: string | number
        color?: BadgeColor
        pastel?: boolean
        outline?: boolean
        size?: string
        /** @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'` */
        roundedSize?: BadgeRoundedSize
      }
    }
  | string

type MazTabsBarItems = MazTabsBarItem[]

Props & Events emitted

MazTabs

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
modelValue	The the selected tab number	number	-

Events

Event name	Properties	Description
update:model-value	newValue number - new value set	Emitted when the selected tab change

Slots

Name	Description	Bindings
default

MazTabsBar

Props & Slots

Props

Prop name	Description	Type	Values	Default
items	The items to display in the tabs bar	Array	-
persistent	Will add a query param to the url to keep the selected tab on page refresh	boolean	-
queryParam	The name of the query param to add to the url @default tab	string	-	'tab'
block	Will make the tabs bar full width	boolean	-
noElevation	Will remove the elevation	boolean	-
autoScroll	Will add a scroll on the tabs bar to show selected element @default true	boolean	-	true

Slots

Name	Description	Bindings
item	Content of item to display in the tabs bar	item MazTabsBarItem[] - all data of the item active boolean - true if the tab is active index number - index of the item
badge-content	Content in the badge	content string | number | boolean - content of the badge provided in item

MazTabsContent

Props & Slots

Slots

Name	Description	Bindings
default

MazTabsContentItem

Props & Slots

Props

Prop name	Description	Type	Values	Default
tab		number	-

Slots

Name	Description	Bindings
default