R
导航BounceSidebar弹簧动画分组Motion

弹跳侧栏

纵向导航列表，激活指示器带弹簧回弹。支持分组标题与链接项。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/bounce-sidebar.tsx。

npx shadcn@latest add swamimalode07/rare-ui/bounce-sidebar

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

bounce-sidebar.tsx
import { BounceSidebar } from "@/components/ui/bounce-sidebar"


export function Demo() {
  return (
    <BounceSidebar
      dotColor="#fc4c01"
      items={[
        { label: "开始", heading: true },
        "安装",
        { label: "属性说明", href: "#props" },
        "示例",
      ]}
    />
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
items(string | { label; href? } | { label; heading: true })[]—列表项，heading 为分组标题。
valuenumber—受控选中索引。
defaultValuenumber0非受控默认索引。
onChange(index: number) => void—选中变化回调。
dotColorstring"#FC4C01"指示点颜色。