QiuYe UI
选择与切换

Responsive Tabs

响应式标签页组件：responsive 模式统一等宽并在空间不足时滚动，scroll 模式按内容宽度滚动，grid 模式按配置列数等分换行；列表、标签与动画高亮均使用 Figma/iOS 风格平滑圆角，并支持图标、徽标与禁用状态。

tabsnavigationresponsivemobilescrollgridbadgeiconshadcnanimationsmooth-corners

快速预览

查看 Responsive Tabs 组件的基本效果

当前选中：全部

基本用法

使用 Responsive Tabs 组件的基础示例

导入组件

1import { ResponsiveTabs } from "@/components/qiuye-ui/responsive-tabs";
2import { useState } from "react";

使用组件

1const [value, setValue] = useState("all");
2const items = [
3  { value: "all", label: "全部" },
4  { value: "active", label: "进行中" },
5  { value: "review", label: "等待审批" },
6];
7

8return (
9  <ResponsiveTabs value={value} onValueChange={setValue} items={items}>
10    <div className="p-4">
11      当前选中：{items.find((item) => item.value === value)?.label}
12    </div>
13  </ResponsiveTabs>
14);

组件演示

查看组件的各种使用方式和效果

布局模式契约

先根据选项宽度、溢出方式和是否允许换行选择模式，再配置滚动提示或网格列数。

模式选项宽度空间不足行数gridColsClass
responsive所有选项始终等宽统一采用最长项宽度后滚动单行忽略
scroll按各自内容宽度直接横向滚动单行忽略
grid按配置列数等分换行展示可多行生效

等宽分配与溢出回退

responsive 模式会把文案、图标和徽标都计入最小宽度。空间足够时平均分配整行；空间不足时以最长选项为统一宽度，并只在组件内部横向滚动。

容器宽度：560 px
当前选中全部

同一组数据，三种布局

相同文案同时展示，宽度分配和换行差异无需来回切换即可直接比较。

responsive全部

等宽优先，放不下完整内容时滚动

scroll全部

每项保持自己的内容宽度，始终可滚动

grid全部

按指定列数等分，多出的选项换行

内容、状态与尺寸

图标、徽标和禁用状态可以混合使用；尺寸与动画只改变视觉密度和切换反馈，不改变当前布局模式的宽度契约。

尺寸
收件箱可组合内容