QiuYe UI
选择与切换

Clip Path Tabs

通过 clip-path 平滑切换完整选中态的标签按钮组：默认使用无间隙的连续背景，也可选择保留间隙的分段过渡；背景与文本颜色保持同步，支持胶囊/圆角矩形、Figma/iOS 风格平滑圆角、自定义配色、三档尺寸、等宽布局、禁用项及受控/非受控状态。

tabsclip-pathtransitionnavigationpillroundedsmooth-cornerskeyboardradix

快速预览

查看 Clip Path Tabs 组件的基本效果

当前视图：支付

基本用法

使用 Clip Path Tabs 组件的基础示例

导入组件

1import {
2  ClipPathTabs,
3  ClipPathTabsContent,
4} from "@/components/qiuye-ui/clip-path-tabs";
5import { useState } from "react";

使用组件

1const [value, setValue] = useState("overview");
2

3return (
4  <ClipPathTabs
5    ariaLabel="项目视图"
6    value={value}
7    onValueChange={setValue}
8    items={[
9      { value: "overview", label: "概览" },
10      { value: "activity", label: "动态" },
11      { value: "settings", label: "设置" },
12    ]}
13  >
14    <ClipPathTabsContent value="overview">概览内容</ClipPathTabsContent>
15    <ClipPathTabsContent value="activity">动态内容</ClipPathTabsContent>
16    <ClipPathTabsContent value="settings">设置内容</ClipPathTabsContent>
17  </ClipPathTabs>
18);

组件演示

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

默认胶囊

当前视图：余额

保留间隙的分段过渡

平滑圆角矩形与自定义配色

普通态底色与禁用项

高级不可用