Docked Inspector Rail

右側停靠的上下文檢查器面板，以推擠模式展開讓主內容同步重排，分節可摺疊並支援拖曳調整寬度。

載入預覽⋯

Playground

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

面板標題title

預設展開defaultOpen

初始寬度（px）defaultWidth

300

最小寬度（px）minWidth

220

最大寬度（px）maxWidth

440

<DockedInspectorRail />

安裝

npx shadcn@latest add https://webberui.com/r/docked-inspector-rail.json

或在 components.json 設定 registries 後，改用 @webberui/docked-inspector-rail 安裝。

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

npm install motion clsx tailwind-merge lucide-react

使用

由 DockedInspectorRail 包住主內容（DockedInspectorMain）與停靠面板（DockedInspector）。面板以寬度動畫推開，主內容因 flex-1 同步重排而非被遮罩覆蓋。將 InspectorTrigger 放在主內容任意處即可切換展開。

import {
  DockedInspector,
  DockedInspectorMain,
  DockedInspectorRail,
  InspectorSection,
  InspectorTrigger,
} from "@/components/ui/docked-inspector-rail";

export function Example() {
  return (
    <DockedInspectorRail defaultOpen className="h-[420px]">
      <DockedInspectorMain>
        <InspectorTrigger>切換檢視欄</InspectorTrigger>
        {/* 主內容 */}
      </DockedInspectorMain>

      <DockedInspector title="檢查器">
        <InspectorSection title="外觀" defaultOpen>
          {/* 欄位 */}
        </InspectorSection>
        <InspectorSection title="排版">{/* 欄位 */}</InspectorSection>
      </DockedInspector>
    </DockedInspectorRail>
  );
}

受控模式：傳入 open 與 onOpenChange 自行掌握展開狀態；onWidthChange 可持久化使用者調整後的寬度。

元件組成

元件	說明
`DockedInspectorRail`	最外層容器，提供狀態並以 flex 排列主內容與面板
`DockedInspectorMain`	主內容區域，隨面板寬度自動重排
`DockedInspector`	右側停靠面板，寬度動畫推擠、左緣可拖曳調整
`InspectorSection`	面板內可摺疊分節
`InspectorTrigger`	切換面板展開的觸發鈕
`InspectorClose`	關閉面板的按鈕（`title` 頁首已內建一顆）

Props

DockedInspectorRail

Prop	型別	預設值	說明
`open`	`boolean`	—	受控模式的展開狀態
`onOpenChange`	`(open: boolean) => void`	—	展開狀態變更回呼
`defaultOpen`	`boolean`	`false`	非受控模式的初始展開狀態
`defaultWidth`	`number`	`300`	面板初始寬度（px）
`minWidth`	`number`	`220`	拖曳可縮到的最小寬度（px）
`maxWidth`	`number`	`440`	拖曳可放到的最大寬度（px）
`onWidthChange`	`(width: number) => void`	—	寬度變更回呼
`className`	`string`	—	追加至容器；建議在此指定高度

DockedInspector

Prop	型別	預設值	說明
`title`	`React.ReactNode`	—	提供時自動渲染含關閉鈕的頁首
`className`	`string`	—	追加至面板容器

InspectorSection

Prop	型別	預設值	說明
`title`	`React.ReactNode`	—	分節標題
`icon`	`React.ReactNode`	—	標題左側選用圖示
`defaultOpen`	`boolean`	`true`	初始是否展開
`className`	`string`	—	追加至分節容器

細節

推擠而非覆蓋：面板以 width 動畫展開，主內容因 min-w-0 flex-1 隨之重排，全程無遮罩層。
拖曳調整寬度：面板左緣的把手支援指標拖曳；上限同時受 maxWidth 與容器可用寬度夾住，永遠為主內容保留最小寬度。拖曳期間動畫即時跟手、鎖定全域游標與文字選取。
分節摺疊：InspectorSection 以高度動畫展開／收合，箭頭同步旋轉。
建議在 DockedInspectorRail 的 className 指定明確高度，面板內容過長時分節區會自行捲動。

可及性

觸發鈕帶 aria-expanded 與 aria-controls，指向面板；關閉後焦點歸還觸發鈕。
面板為非模態 complementary 區域，不鎖背景捲動、不搶焦點；焦點位於面板內時按 Esc 收合。
收合時面板內容以 inert 移出 Tab 序列與無障礙樹。
拖曳把手為 role="separator"，可用 Tab 聚焦，方向鍵調整寬度、Home／End 跳至最寬／最窄。
使用者系統開啟「減少動態效果」時，寬度與摺疊動畫改為即時切換。

Docked Inspector Rail

On this page