Spec Label Section

營養標示風格的產品規格區塊，滾入視窗時逐列蓋章浮現，任一列可展開顯示註解與佐證連結。

載入預覽⋯

Playground

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

區塊標題title

副標文字subtitle

底部附註footnote

逐列蓋章間隔（秒）stagger

0.08

展開／收合時長（秒）duration

0.3

只播放一次進場動畫once

<SpecLabelSection />

安裝

npx shadcn@latest add https://webberui.com/r/spec-label-section.json

或在 components.json 設定 registries 後，改用 @webberui/spec-label-section 安裝。

安裝依賴後，從 registry JSON（/r/spec-label-section.json 的 files[0].content）複製 spec-label-section.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import {
  SpecLabelSection,
  type SpecItem,
} from "@/components/ui/spec-label-section";

const items: SpecItem[] = [
  {
    id: "battery",
    label: "電池續航",
    value: "38",
    unit: "小時",
    emphasis: true,
    detail: "開啟主動降噪、音量 50% 下的連續播放測試值。",
    links: [{ label: "測試方法", href: "#" }],
  },
  { id: "weight", label: "重量", value: "248", unit: "g" },
];

<SpecLabelSection
  title="規格總覽"
  subtitle="Model NC-900 · 每副"
  items={items}
/>;

Props

`SpecLabelSection`

Prop	型別	預設值	說明
`items`	`SpecItem[]`	—	規格項目資料
`title`	`React.ReactNode`	—	區塊標題，作為 aria 標記
`subtitle`	`React.ReactNode`	—	標題下方副標（型號、份量等）
`featureHeading`	`React.ReactNode`	`"項目"`	欄位表頭：功能欄標題
`valueHeading`	`React.ReactNode`	`"規格"`	欄位表頭：數值欄標題
`footnote`	`React.ReactNode`	—	底部附註小字（以粗線分隔）
`openIds`	`string[]`	—	受控模式：目前展開的列 id 陣列
`defaultOpenIds`	`string[]`	`[]`	非受控模式的初始展開 id 陣列
`onOpenChange`	`(ids: string[]) => void`	—	展開狀態變更時觸發
`stagger`	`number`	`0.08`	逐列蓋章浮現的間隔（秒）
`delay`	`number`	`0`	進場前延遲（秒）
`duration`	`number`	`0.3`	展開／收合時長（秒）
`once`	`boolean`	`true`	只在第一次進入視口時播放

`SpecItem`

欄位	型別	說明
`id`	`string`	唯一鍵，受控展開配對用，務必穩定
`label`	`React.ReactNode`	功能／項目名稱（列左側）
`value`	`React.ReactNode`	主要數值（請自行格式化）
`unit`	`React.ReactNode`	數值後的單位（較小字級）
`emphasis`	`boolean`	以粗規則線與大字強調此列
`detail`	`React.ReactNode`	展開後顯示的註解說明
`links`	`SpecEvidenceLink[]`	展開後顯示的佐證連結

`SpecEvidenceLink`

欄位	型別	說明
`label`	`React.ReactNode`	連結文字
`href`	`string`	連結網址（在新分頁開啟）

細節

蓋章浮現：整個表格滾入視窗時，各列以 scale 略大→落定、伴隨淡入與微模糊，依 stagger 逐列蓋章。設 once={false} 可在每次進入視口時重播。
粗細規則線：外框與招牌粗黑條、表頭下緣為粗線；一般列以細灰線分隔，emphasis 列則改用粗黑線並放大數值，模擬營養標示的層級。
可展開列：帶有 detail 或 links 的列會顯示指示箭頭並可點擊，於列下方以高度過場展開註解與佐證連結；無這兩者的列渲染為靜態非互動列。
受控／非受控：不傳 openIds 時由元件自行管理展開狀態（可用 defaultOpenIds 設定初始）；傳入 openIds 則完全受控，搭配 onOpenChange 同步。允許同時展開多列。

可及性

可展開列為原生 <button>，帶 aria-expanded 與 aria-controls，鍵盤可聚焦並以 Enter／Space 切換。
展開區塊為 role="region" 並以 aria-labelledby 指回觸發列。
提供 title 時，區塊以 aria-labelledby 關聯其標題。
佐證連結以 target="_blank" 開啟並加上 rel="noopener noreferrer"。
使用者系統開啟「減少動態效果」時，停用蓋章與展開過場，直接呈現靜態表格。

Spec Label Section

On this page