导航与展开@neumorphism-ui/carousel

Carousel

使用 Embla Carousel 处理滚动位置和拖动，新拟态仅负责幻灯片表面和控制按钮。到达首尾时，上一个和下一个按钮会自动禁用。

@neumorphism-ui/carousel

Registry JSON

预览

仪表盘

设置

分析

安装

npx shadcn@latest add @neumorphism-ui/carousel

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

"use client";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

Example

export default function Example() {
  return <Carousel aria-label="功能导览" className="w-full max-w-md px-12">
    <CarouselContent>
      {["仪表盘", "设置", "分析"].map((item) => <CarouselItem key={item}><div className="grid h-40 place-items-center rounded-[var(--neu-radius-surface)] border border-[var(--neu-edge)] bg-[var(--neu-surface)] [box-shadow:var(--neu-shadow-raised-sm)]">{item}</div></CarouselItem>)}
    </CarouselContent>
    <CarouselPrevious label="上一张" />
    <CarouselNext label="下一张" />
  </Carousel>;
}

API 参考

组件	属性	类型	默认值	说明
`Carousel`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	设置滚动轴和对应的方向键行为。
`Carousel`	`opts`	`EmblaOptionsType`	`—`	传递 loop、align 等 Embla 选项。
`Carousel`	`setApi`	`(api: CarouselApi) => void`	`—`	向外部集成提供 Embla API 实例。
`CarouselItem`	`children`	`ReactNode`	`—`	放置单个幻灯片的真实内容。
`CarouselPrevious / CarouselNext`	`label`	`string`	`—`	本地化前后导航按钮的无障碍名称。

预览

安装

用法

Import

Example

API 参考

无障碍