NutUI选项卡组件：Tabs与TabPane的内容切换与样式定制

NutUI选项卡组件：Tabs与TabPane的内容切换与样式定制

🔥【免费下载链接】nutui 京东风格的移动端 Vue2、Vue3 组件库 、支持多端小程序(A Vue.js UI Toolkit for Mobile Web) 项目地址: https://gitcode.com/gh_mirrors/nu/nutui

还在为移动端应用的内容切换而烦恼？NutUI的Tabs选项卡组件为你提供了一套完整的解决方案！本文将带你深入了解如何使用Tabs和TabPane组件实现流畅的内容切换与个性化样式定制。

快速上手基础用法

Tabs组件是NutUI中用于平级区域内容收纳和展现的核心组件。只需几行代码即可创建基本选项卡：

<template>
  <nut-tabs v-model="value">
    <nut-tab-pane title="Tab 1" pane-key="1">内容一</nut-tab-pane>
    <nut-tab-pane title="Tab 2" pane-key="2">内容二</nut-tab-pane>
    <nut-tab-pane title="Tab 3" pane-key="3">内容三</nut-tab-pane>
  </nut-tabs>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('1')
</script>

多样化样式选择

Smile微笑样式

通过设置type="smile"可获得京东特色的微笑样式：

<nut-tabs v-model="value" type="smile">
  <nut-tab-pane title="推荐" pane-key="1">推荐内容</nut-tab-pane>
  <nut-tab-pane title="热门" pane-key="2">热门内容</nut-tab-pane>
</nut-tabs>

垂直布局选项

支持水平和垂直两种方向布局，满足不同设计需求：

<nut-tabs v-model="value" direction="vertical">
  <nut-tab-pane title="分类" pane-key="1">分类内容</nut-tab-pane>
  <nut-tab-pane title="品牌" pane-key="2">品牌内容</nut-tab-pane>
</nut-tabs>

高级功能特性

手势滑动切换

启用swipeable属性后，用户可通过左右滑动切换标签页：

<nut-tabs v-model="value" swipeable>
  <!-- tab内容 -->
</nut-tabs>

自动高度调整

设置auto-height="true"让选项卡高度随内容自适应：

<nut-tabs v-model="value" auto-height>
  <!-- 动态高度内容 -->
</nut-tabs>

完全自定义样式

通过插槽机制，你可以完全自定义标签栏的样式：

<nut-tabs v-model="value">
  <template #titles>
    <div v-for="item in list" :key="item.paneKey" 
         class="custom-tab" @click="value = item.paneKey">
      <div :class="{ active: value === item.paneKey }">
        {{ item.title }}
      </div>
    </div>
  </template>
  <nut-tab-pane v-for="item in list" :key="item.paneKey" 
                :pane-key="item.paneKey">
    {{ item.content }}
  </nut-tab-pane>
</nut-tabs>

主题定制与样式变量

NutUI提供了丰富的CSS变量用于样式定制：

:root {
  --nut-tabs-tab-smile-color: #ff0000; /* 微笑样式颜色 */
  --nut-tabs-titles-item-font-size: 16px; /* 字体大小 */
  --nut-tabs-titles-item-active-color: #007bff; /* 激活状态颜色 */
}

最佳实践建议

1. 性能优化：对于内容较多的标签页，建议使用v-if或keep-alive进行懒加载
2. 移动端适配：启用title-scroll属性确保在小屏幕设备上的良好体验
3. 无障碍访问：确保每个标签都有明确的标题和键盘导航支持

通过NutUI的Tabs组件，你可以轻松构建出既美观又功能强大的选项卡界面。无论是电商应用的分类筛选，还是内容型应用的信息组织，Tabs组件都能提供出色的用户体验。

相关组件源码位置：src/packages/__VUE/tabs/ 示例代码参考：src/packages/__VUE/tabs/demo/

🔥【免费下载链接】nutui 京东风格的移动端 Vue2、Vue3 组件库 、支持多端小程序(A Vue.js UI Toolkit for Mobile Web) 项目地址: https://gitcode.com/gh_mirrors/nu/nutui