Responsive Tabs
响应式标签页组件：小屏横向滚动、可选左右滚动按钮与渐变遮罩；大屏可切换为网格布局；支持图标、徽标、禁用与自定义样式。
快速预览
查看 Responsive Tabs 组件的基本效果
标签一的内容
基本用法
使用 Responsive Tabs 组件的基础示例
导入组件
1import { ResponsiveTabs } from "@/components/qiuye-ui/responsive-tabs";2import { useState } from "react";使用组件
1const [value, setValue] = useState("tab1");2const items = [3 { value: "tab1", label: "标签一" },4 { value: "tab2", label: "标签二" },5];6
7return (8 <ResponsiveTabs value={value} onValueChange={setValue} items={items}>9 <div className="p-4">10 {value === "tab1" && <div>标签一的内容</div>}11 {value === "tab2" && <div>标签二的内容</div>}12 </div>13 </ResponsiveTabs>14);组件演示
查看组件的各种使用方式和效果
基本用法
默认 responsive 布局：小屏横向滚动，≥sm 断点自动切换为网格。 尝试缩放浏览器宽度观察变化。
全部
当前选中「全部」。缩小窗口宽度 → 标签栏自动变为横向滚动；放大窗口 → 自动切换为网格平铺。
图标、徽标与禁用态
每个 Tab 可独立配置 icon（前置图标）、badge（数字/文字徽标）和 disabled（禁用）。
收件箱
12徽标值为「12」。可以是数字表示数量，也可以是文字标记状态。
选中态动画高亮
切换 Tab 时，高亮底色以弹簧动画平滑滑动到目标选项卡 （默认开启，可通过 animatedHighlight 属性控制）。
概览
注意观察：选中高亮底色正以弹簧动画从前一个标签平滑滑动到当前标签。
三种布局模式
responsive（自适应，默认）、scroll（始终横向滚动）、grid（始终网格平铺）。 切换按钮实时对比差异。
分类 1
当前为 responsive 模式：小屏自动横向滚动（可手势左右滑动），大屏切换为网格平铺展示。
渐变遮罩效果
滚动模式下，左右两侧显示渐变遮罩提示可滚动区域。通过 fadeMasks 开关和 fadeMaskWidth 设置宽度。遮罩会在滚到边界时自动消失。
文档
向左右滚动标签栏，注意观察两端的渐变遮罩 — 有更多内容可滚动时自动出现，滚到最边界时平滑消失。
动态增删标签
支持运行时动态增删 Tab 选项，组件自动维护激活态和滚动位置。配合外部控制（上一项/下一项）验证受控切换。
标签 1
动态生成的内容 · 标签 ID：d0 · 当前共 5 个标签。新增的标签会自动被选中并滚动到可见位置。
自定义样式
通过 listClassName、triggerClassName自定义容器与选项卡样式。自定义选中态时建议关闭 animatedHighlight 以避免冲突。
首页
此示例使用了 primary 色系的选中态样式，容器添加了半透明背景色。关闭了 animatedHighlight 以避免与自定义样式冲突。
交互式 Playground
调整所有可配置参数，实时观察行为变化。包含 14 个标签项（含长标题、图标、徽标）以充分测试溢出与滚动。
这是一个很长的标签标题 0
1layout: responsive · animatedHighlight: on · fadeMasks: on · scrollStep: 200px · fadeMaskWidth: 64px