nutui/src/packages/__VUE/tabs/doc.en-US.md

Tabs

Intro

It is often used for the storage and display of large blocks of content in the level area, and supports the form of embedded tags and rendering loop data.

Install

import { createApp } from 'vue';
import { Tabs, TabPane } from '@nutui/nutui';

const app = createApp();
app.use(Tabs);
app.use(TabPane);

Basic Usage

:::demo

<template>
<nut-tabs v-model="state.tab1value">
  <nut-tab-pane title="Tab 1">
    Tab 1
  </nut-tab-pane>
  <nut-tab-pane title="Tab 2">
    Tab 2
  </nut-tab-pane>
  <nut-tab-pane title="Tab 3">
    Tab 3
  </nut-tab-pane>
</nut-tabs>
</template>
<script lang="ts">
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      tab1value: '0',
    });
    return { state };
  }
};
</script>

:::

Basic Usage - Smile Curve

:::demo

<template>
<nut-tabs v-model="state.tab11value" type="smile">
  <nut-tab-pane title="Tab 1">
    Tab 1
  </nut-tab-pane>
  <nut-tab-pane title="Tab 2">
    Tab 2
  </nut-tab-pane>
  <nut-tab-pane title="Tab 3">
    Tab 3
  </nut-tab-pane>
</nut-tabs>
</template>
<script lang="ts">
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      tab11value: '0',
    });
    return { state };
  }
};
</script>

:::

Match by pane-key

:::demo

<template>
<nut-tabs v-model="state.tab2value">
  <nut-tab-pane title="Tab 1" pane-key="0">
    Tab 1
  </nut-tab-pane>
  <nut-tab-pane title="Tab 2" pane-key="1" :disabled="true">
    Tab 2
  </nut-tab-pane>
  <nut-tab-pane title="Tab 3" pane-key="2">
    Tab 3
  </nut-tab-pane>
</nut-tabs>
</template>
<script lang="ts">
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      tab2value: '0',
    });
    return { state };
  }
};
</script>

:::

Tabpane height auto

Automatic height. When set to true, nut-tabs and nut-tabs__content will change with the height of the current nut-tab-pane.

:::demo

<template>
  <nut-tabs v-model="state.tab2value" :auto-height="true">
    <nut-tab-pane title="Tab 1" pane-key="0">
      <p>Tab 1</p>
      <p>Tab 1</p>
      <p>Tab 1</p>
      <p>Tab 1</p>
    </nut-tab-pane>
    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
  </nut-tabs>
</template>
<script lang="ts">
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      tab2value: '0',
    });
    return { state };
  }
};
</script>

:::

Data is rendered asynchronously for 3s

:::demo

<template>
<nut-tabs v-model="state.tab3value">
  <nut-tab-pane v-for="item in state.list3" :title="'Tab '+ item">
    Tab {{item}}
  </nut-tab-pane>
</nut-tabs>
</template>
<script lang="ts">
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      tab3value: '0',
      list3: Array.from(new Array(2).keys()),
    });
    setTimeout(() => {
      state.list3.push(999);
    }, 3000);
    return { state };
  }
};
</script>

:::

A large number of scrolling operations

:::demo

<template>
<nut-tabs v-model="state.tab4value" title-scroll title-gutter="10">
  <nut-tab-pane v-for="item in state.list4" :title="'Tab '+ item">
    Tab {{item}}
  </nut-tab-pane>
</nut-tabs>
</template>
<script lang="ts">
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      tab1value: '0',
      list4: Array.from(new Array(10).keys()),
    });
    return { state };
  }
};
</script>

:::

Left and right layout

:::demo

<template>
<nut-tabs style="height:300px" v-model="state.tab5value" title-scroll direction="vertical">
  <nut-tab-pane v-for="item in state.list5" :title="'Tab '+ item">
    Tab {{item}}
  </nut-tab-pane>
</nut-tabs>
</template>
<script lang="ts">
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      tab5value: '0',
      list5: Array.from(new Array(2).keys()),
    });
    return { state };
  }
};
</script>

:::

Left and Right Layout - Smile Curve

:::demo

<template>
<nut-tabs style="height:300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
  <nut-tab-pane v-for="item in state.list5" :title="'Tab '+ item">
    Tab {{item}}
  </nut-tab-pane>
</nut-tabs>
</template>
<script lang="ts">
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      tab6value: '0',
      list5: Array.from(new Array(2).keys()),
    });
    return { state };
  }
};
</script>

:::

tab bar font size large normal small

:::demo

<template>
<nut-tabs v-model="state.tab1value" size="large">
  <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
  <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
  <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
</nut-tabs>
<nut-tabs v-model="state.tab1value" size="normal">
  <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
  <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
  <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
</nut-tabs>
<nut-tabs v-model="state.tab1value" size="small">
  <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
  <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
  <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
</nut-tabs>
</template>
<script lang="ts">
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      tab1value: '0',
    });
    return { state };
  }
};
</script>

:::

custom tab bar

:::demo

<template>
<nut-tabs v-model="state.tab7value">
  <template v-slot:titles>
    <div class="nut-tabs__titles-item" @click="state.tab7value=item.paneKey"
      :class="{active:state.tab7value==item.paneKey}" :key="item.paneKey" v-for="item in state.list6">
      <Dongdong />
      <span class="nut-tabs__titles-item__text">{{item.title}}</span>
      <span class="nut-tabs__titles-item__line"></span>
    </div>
  </template>
  <nut-tab-pane v-for="item in state.list6" :pane-key="item.paneKey">
    {{item.title}}
  </nut-tab-pane>
</nut-tabs>
</template>
<script lang="ts">
import { reactive } from 'vue';
import { Dongdong } from '@nutui/icons-vue';
export default {
  components: { Dongdong },
  setup() {
    const state = reactive({
      tab7value: 'c1',
       list6: [
        {
          title: 'custom 1',
          paneKey: 'c1'
        },
        {
          title: 'custom 2',
          paneKey: 'c2'
        },
        {
          title: 'custom 3',
          paneKey: 'c3'
        }
      ]
    });
    return { state };
  }
};
</script>

:::

API

Tabs Props

Attribute	Description	Type	Default
v-model	Index of active tab	number | string	0
color	Label selection color	string	#1a1a1a
background	Tab bar background color	string	#f5f5f5
direction	Use landscape orientation optional value horizontal、vertical	string	horizontal
type	Check the bottom display style optional value line、smile	string	line
title-scroll	Is the tab bar scrollable	boolean	false
ellipsis	Whether to omit too long title text	boolean	true
animated-time	Switch animation duration, unit ms 0 means no animation	number | string	300
title-gutter	Label gap	number | string	0
size	Tab bar font size optional value large normal small	string	normal
auto-height	Automatic height. When set to true, nut-tabs and nut-tabs__content will change with the height of the current nut-tab-pane.	boolean	false
sticky	Whether to use sticky mode	boolean	false
top	Sticky offset top	number	0

Tabs Slots

Name	Description
titles	Custom Titles Area
default	Custom Default Content

Tabpane Props

Attribute	Description	Type	Default
title	title	string
pane-key	Tag Key , the matching identifier	string	默认索引0,1,2...
disabled	whether to disable tabs	boolean	false

Tabpane Slots

Name	Description
default	Custom Default Content

Tabs Events

Event	Description	Arguments
click	Triggered when the label is clicked	{title,paneKey,disabled}
change	Fired when the currently active tab changes	{title,paneKey,disabled}

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value
--nut-tabs-tab-smile-color	var(--nut-primary-color)
--nut-tabs-titles-border-radius	0
--nut-tabs-titles-item-large-font-size	var(--nut-font-size-3)
--nut-tabs-titles-item-font-size	var(--nut-font-size-2)
--nut-tabs-titles-item-small-font-size	var(--nut-font-size-1)
--nut-tabs-titles-item-color	var(--nut-title-color)
--nut-tabs-titles-item-active-color	var(--nut-title-color)
--nut-tabs-titles-background-color	var(--nut-help-color)
--nut-tabs-horizontal-tab-line-color	linear-gradient(90deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)
--nut-tabs-horizontal-titles-height	46px
--nut-tabs-horizontal-titles-item-min-width	50px
--nut-tabs-horizontal-titles-item-active-line-width	40px
--nut-tabs-vertical-tab-line-color	linear-gradient(180deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)
--nut-tabs-vertical-titles-item-height	40px
--nut-tabs-vertical-titles-item-active-line-height	14px
--nut-tabs-vertical-titles-width	100px
--nut-tabs-titles-item-line-border-radius	0
--nut-tabs-titles-item-line-opacity	1