MazTabs

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

Basic usage

Tab 1

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

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

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

With model-value

Tab 2

View code

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

const currentTab = ref(2)

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

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

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

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' : 'transparent'"> {{ index }} </MazBadge>
    </template>
  </MazTabsBar>
</MazTabs>

Types

type MazTabsBarItem
  = | {
    /**
     * Label of the tab
     */
    label: string
    /**
     * Will disable the tab
     * @default false
     */
    disabled?: boolean
    /**
     * Badge to display in the tab
     * Inherit all props of MazBadge component
     */
    badge?: MazBadgeProps & {
      /**
       * Content of the badge
       */
      content: string | number | boolean
    }
  }
  | string

Props & Events emitted

MazTabs

Props

Name	Description	Type	Required
model-value	The the selected tab number	number	No

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

Name	Description	Type	Required	Default
items	The items to display in the tabs bar	MazTabsBarItem[]	Yes	undefined
persistent	Will add a query param to the url to keep the selected tab on page refresh	boolean	No	false
query-param	The name of the query param to add to the url	string	No	tab
block	Will make the tabs bar full width	boolean	No	false
elevation	Will remove the elevation	boolean	No	false
auto-scroll	Will add a scroll on the tabs bar to show selected element	boolean	No	true
bordered	Will add a border to the tabs bar	boolean	No	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

Slots

Name	Description	Bindings
default

MazTabsContentItem

Props

Name	Description	Type	Required
tab		number	Yes

Slots

Name	Description	Bindings
default