nutui-uniapp

Appearance

Tabs 选项卡切换 ​

介绍 ​

常用于平级区域大块内容的的收纳和展现，支持内嵌标签形式和渲染循环数据形式。

基础用法 ​

html
<template>
  <nut-tabs v-model="value">
    <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>
ts
const value = ref(0);

手势滑动切换 ​

html
<template>
  <nut-tabs v-model="value" swipeable>
    <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>

微笑曲线 ​

html
<template>
  <nut-tabs v-model="value" 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>

通过 pane-key 匹配 ​

html
<template>
  <nut-tabs v-model="value">
    <nut-tab-pane title="Tab 1" pane-key="0">
      Tab 1
    </nut-tab-pane>

    <nut-tab-pane title="Tab 2" pane-key="1" disabled>
      Tab 2
    </nut-tab-pane>

    <nut-tab-pane title="Tab 3" pane-key="2">
      Tab 3
    </nut-tab-pane>
  </nut-tabs>
</template>
ts
const value = ref("0");

自动高度 ​

auto-height 设置为 true 时，nut-tabs 和 nut-tabs__content 会随着当前 nut-tab-pane 的高度而发生变化。

html
<template>
  <nut-tabs v-model="value" auto-height>
    <nut-tab-pane title="Tab 1">
      <view>Tab 1</view>
      <view>Tab 1</view>
      <view>Tab 1</view>
      <view>Tab 1</view>
    </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>

数据异步渲染 ​

html
<template>
  <nut-tabs v-model="value">
    <nut-tab-pane
      v-for="(item) in list"
      :key="item"
      :title="`Tab ${item}`"
    >
      Tab {{ item }}
    </nut-tab-pane>
  </nut-tabs>
</template>
ts
const value = ref(0);

const list = ref(Array.from({ length: 2 }).map((_, index) => index + 1));

setTimeout(() => {
  list.value.push(999);
}, 1000);

数量多，滚动操作 ​

html
<template>
  <nut-tabs v-model="value" title-scroll title-gutter="10">
    <nut-tab-pane
      v-for="(item) in list"
      :key="item"
      :title="`Tab ${item}`"
    >
      Tab {{ item }}
    </nut-tab-pane>
  </nut-tabs>
</template>

左右布局 ​

可通过 direction 属性修改标题栏自动滚动方向。

html
<template>
  <nut-tabs
    v-model="value"
    direction="vertical"
    title-scroll
    title-gutter="10"
  >
    <nut-tab-pane
      v-for="(item) in list"
      :key="item"
      :title="`Tab ${item}`"
    >
      Tab {{ item }}
    </nut-tab-pane>
  </nut-tabs>
</template>

标签栏字体尺寸 ​

html
<template>
  <nut-tabs v-model="value" 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>

  <nut-tabs v-model="value" 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="value" 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>
</template>

自定义标签栏 ​

html
<template>
  <nut-tabs v-model="value" swipeable>
    <template #titles>
      <view class="flex">
        <view
          v-for="(item) in list"
          :key="item.key"
          class="title-item"
          :class="{ 'is-active': item.key === value }"
          @click="value = item.key"
        >
          <nut-icon name="dongdong"></nut-icon>
          <text class="title-item____text">
            {{ item.title }}
          </text>
          <view class="title-item__line"></view>
        </view>
      </view>
    </template>

    <nut-tab-pane
      v-for="(item) in list"
      :key="item"
      :pane-key="item.key"
    >
      {{ item.title }}
    </nut-tab-pane>
  </nut-tabs>
</template>
ts
const value = ref("c1");

const list = ref([
  { key: "c1", title: "自定义 1" },
  { key: "c2", title: "自定义 2" },
  { key: "c3", title: "自定义 3" }
]);

API ​

Tabs Props ​

参数说明类型可选值默认值
v-model绑定当前选中标签的标识符number / string-0
custom-color标签选中色string-#1a1a1a
background标签栏背景颜色string-#f5f5f5
direction使用横纵方向stringhorizontal / verticalhorizontal
type选中底部展示样式stringline / smileline
swipeable是否开启手势左右滑动切换boolean-false
title-scroll标签栏是否可以滚动boolean-false
ellipsis是否省略过长的标题文字boolean-true
animated-time切换动画时长（单位：ms）number / string-300
title-gutter标签间隙number / string-0
size标签栏字体尺寸大小stringsmall / normal / largenormal
auto-height是否启用自动高度boolean-false
align 1.6.0横轴方向的标题对齐方式stringleft / centercenter

Tabs Events ​

事件名说明类型
click点击标签时触发(event: { title, paneKey, disabled }) => void
change当前激活的标签改变时触发(event: { title, paneKey, disabled }) => void

Tabs Slots ​

名称说明
titles自定义导航区域
default自定义内容

TabPane Props ​

参数说明类型可选值默认值
title标题string--
pane-key唯一标识number / string--
disabled是否禁用boolean-false

TabPane Slots ​

名称说明
default自定义内容

主题定制 ​

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值
--nut-tabs-tab-smile-colorvar(--nut-primary-color)
--nut-tabs-titles-border-radius0
--nut-tabs-titles-item-large-font-sizevar(--nut-font-size-3)
--nut-tabs-titles-item-font-sizevar(--nut-font-size-2)
--nut-tabs-titles-item-small-font-sizevar(--nut-font-size-1)
--nut-tabs-titles-item-colorvar(--nut-title-color)
--nut-tabs-titles-item-active-colorvar(--nut-title-color)
--nut-tabs-titles-background-colorvar(--nut-help-color)
--nut-tabs-horizontal-tab-line-colorlinear-gradient(90deg,var(--nut-primary-color) 0%,rgba(#fa2c19, 0.15) 100%)
--nut-tabs-horizontal-titles-height46px
--nut-tabs-horizontal-titles-item-min-width50px
--nut-tabs-horizontal-titles-item-active-line-width40px
--nut-tabs-vertical-tab-line-colorlinear-gradient(180deg,var(--nut-primary-color) 0%,rgba(#fa2c19, 0.15) 100%)
--nut-tabs-vertical-titles-item-height40px
--nut-tabs-vertical-titles-item-active-line-height14px
--nut-tabs-vertical-titles-width100px
--nut-tabs-titles-item-line-border-radius0
--nut-tabs-titles-item-line-opacity1
--nut-tab-pane-padding 1.7.1124px 20px
--nut-tab-pane-background 1.7.11#fff

MIT Licensed

版权所有 © 2023 年-至今 yang1206 贡献者