/
githubmirror
/
ui
Обзор
Документация
Войти
/
githubmirror
/
ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
apps/v4/examples/base/carousel-api.tsx
55 строк
1 KB
shadcn
fix: refactor styles (#10190)
26 мар 2026, 13:36
Не верифицирован
26 мар 2026, 13:36
7d718dd
Код
Авторство
О чём код?
"use client" import * as React from "react" import { Card, CardContent } from "@/styles/base-nova/ui/card" import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi, } from "@/styles/base-nova/ui/carousel" export default function CarouselDApiDemo() { const [api, setApi] = React.useState<CarouselApi>() const [current, setCurrent] = React.useState(0) const [count, setCount] = React.useState(0) React.useEffect(() => { if (!api) { return } setCount(api.scrollSnapList().length) setCurrent(api.selectedScrollSnap() + 1) api.on("select", () => { setCurrent(api.selectedScrollSnap() + 1) }) }, [api]) return ( <div className="mx-auto max-w-[10rem] sm:max-w-xs"> <Carousel setApi={setApi} className="w-full max-w-xs"> <CarouselContent> {Array.from({ length: 5 }).map((_, index) => ( <CarouselItem key={index}> <Card className="m-px"> <CardContent className="flex aspect-square items-center justify-center p-6"> <span className="text-4xl font-semibold">{index + 1}</span> </CardContent> </Card> </CarouselItem> ))} </CarouselContent> <CarouselPrevious /> <CarouselNext /> </Carousel> <div className="py-2 text-center text-sm text-muted-foreground"> Slide {current} of {count} </div> </div> ) }