导航

Responsive Tabs

响应式标签页组件：小屏横向滚动、可选左右滚动按钮与渐变遮罩；大屏可切换为网格布局；支持图标、徽标、禁用与自定义样式。

tabsnavigationresponsivemobilescrollgridbadgeiconshadcn

快速预览

查看 Responsive Tabs 组件的基本效果

标签一的内容

基本用法

使用 Responsive Tabs 组件的基础示例

导入组件

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

使用组件

const [value, setValue] = useState("tab1");
const items = [
  { value: "tab1", label: "标签一" },
  { value: "tab2", label: "标签二" },
];

return (
  <ResponsiveTabs value={value} onValueChange={setValue} items={items}>
    <div className="p-4">
      {value === "tab1" && <div>标签一的内容</div>}
      {value === "tab2" && <div>标签二的内容</div>}
    </div>
  </ResponsiveTabs>
);

组件演示

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

基本使用

移动端横向滚动，≥sm 网格布局

全部组件

这里显示所有可用的组件...

带图标的标签页

每个标签页都可以配置图标

首页

系统概览...

渐变遮罩效果

在scroll模式下展示左右渐变遮罩，提示更多内容

文档

注意观察左右两侧的渐变遮罩效果，它们会在有更多内容可滚动时自动显示。

徽标与状态

支持徽标显示和禁用状态

表单组件

12个

丰富的表单组件库...

布局模式 Playground

切换布局/步长/贴边，观察行为变化

布局：

滚动步长(px)：

遮罩宽度(px)：

这是一个很长很长很长的标签标题 0

当前布局模式：responsive，当前选中：t0

桌面也滚动（layout="scroll"）

测试长标题截断与左右按钮

这是一个很长很长很长的标签标题 0

桌面也保留横向滚动，适合超多分类或标签数量不定的场景。

始终网格（layout="grid"）

均匀分布，信息密集展示

文档中心

均匀网格分布的选项卡。

动态增删标签 + 外部控制

验证滚动定位与受控切换

动态标签 1

这是动态生成的内容。