流體頁籤｜免費 React 元件

底部指示條以「前緣快、後緣慢」的雙彈簧追蹤選中頁籤，移動途中像液體般先拉長再收縮；內容面板依切換方向滑入滑出，帶出清楚的空間方向感，支援受控與非受控兩種模式。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add fluid-tabs

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

初始頁籤defaultValue

指示條樣式indicatorClassName

容器寬度className

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<FluidTabs/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add https://webberui.com/r/fluid-tabs.json

或在 components.json 設定 registries 後，改用 @webberui/fluid-tabs 安裝。

使用

import { FluidTabs } from "@/components/ui/fluid-tabs";

const tabs = [
  { value: "overview", label: "總覽", content: <p>總覽內容</p> },
  { value: "analytics", label: "分析", content: <p>分析內容</p> },
  { value: "settings", label: "設定", content: <p>設定內容</p> },
];

<FluidTabs tabs={tabs} defaultValue="overview" />

Props

Prop	型別	預設值	說明
`tabs`	`FluidTabItem[]`	—	頁籤清單，每項含 `value`、`label` 與可選的 `content`；全部未提供 `content` 時僅作導覽列
`value`	`string`	—	受控模式的當前頁籤值，需搭配 `onChange`
`defaultValue`	`string`	第一個頁籤	非受控模式的初始頁籤值
`onChange`	`(value: string) => void`	—	頁籤切換時的回呼，帶入新的 `value`
`indicatorClassName`	`string`	—	自訂底部指示條的樣式（顏色、高度等）
`className`	`string`	—	透傳到最外層容器

可及性

完整實作 role="tablist" / role="tab" / role="tabpanel"，並以 aria-selected、aria-controls、aria-labelledby 建立關聯
支援鍵盤操作：左右方向鍵循環切換並自動啟用、Home / End 跳至首尾頁籤，焦點以 roving tabindex 管理
使用者系統開啟「減少動態效果」時，指示條直接定位、內容面板僅淡入淡出，不做位移與模糊動畫
指示條為純裝飾元素，以 aria-hidden 對輔助科技隱藏

流體頁籤

把這個效果裝進你的專案

Playground

安裝

使用

Props

可及性

本頁目錄