Preview Sidebar

预览侧边栏

带弹性刻度线、跟随预览和渐进模糊的组件侧边栏。

交互方式

悬停或键盘聚焦条目，短线伸长并显示浮层预览；点击选择，顶部切换编号/分类排列，左上角展开收起，Escape 收起。触屏点击直接选择。演示预览为原创动态图形；可传入视频。视觉参考 Skiper UI，独立实现。

使用示例

"use client"
import { useState } from "react"
import { PreviewSidebar } from "@/components/ui/preview-sidebar"

export function Demo() {
  const [active, setActive] = useState("intro")
  return <PreviewSidebar activeId={active} onSelect={setActive} items={[
    { id: "intro", label: "Introduction", group: "Getting started", preview: <div style={{padding: 24}}>Hello, JungUI</div> },
    { id: "guide", label: "Guide", group: "Getting started", href: "#guide" },
  ]} />
}

参数

参数	类型 / 默认值	说明
`items`	`PreviewSidebarItem[]`	数据：唯一 id、label；可选 group、href、preview（ReactNode）、videoSrc、badge。按输入顺序编号，preview 优先于视频。
`activeId`	`string`	受控选择项 ID。
`defaultActiveId`	`string`	非受控初始选择。
`onSelect`	`(id: string) => void`	点击条目时调用；带 href 的条目同时执行原生导航。
`open`	`boolean`	受控展开状态。
`defaultOpen`	`boolean`true	非受控初始展开状态。
`onOpenChange`	`(open: boolean) => void`	请求展开/收起时调用。
`theme`	`"light" \| "dark"`"light"	独立深浅配色。
`width`	`number`320	侧栏宽度（px），至少 220，受父容器宽度约束。
`height`	`number`520	侧栏高度（px），至少 240。
`label`	`string`"Component navigation"	导航无障碍名称。
`allLabel`	`string`"All components"	全部组件及未分类组名称。
`orderLabel`	`string`"Sorted by Id"	按输入顺序排列时的切换按钮文字。
`groupLabel`	`string`"Sorted by Collection"	分类排列时的切换按钮文字。
`toggleLabel`	`string`"Toggle sidebar"	展开收起按钮无障碍名称。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxmotiontailwind-merge

components/ui/preview-sidebar.css
components/ui/preview-sidebar.tsx
lib/utils.ts

来源

https://skiper-ui.com/v1/skiper8