HUA Docs - The Syntax of Emotion

v1.1.0

Pro

bash

npm install @hua-labs/hua

tsx

import { Carousel } from "@hua-labs/ui/advanced";

: 1

indicators="dots"

indicators="bars"

indicators="numbers"

transition="slide"

slide

transition="fade"

fade

transition="scale"

scale


`children*`	`ReactNode[]`	-	docs:components.carousel.props.children
`autoPlay`	`boolean`	`false`	docs:components.carousel.props.autoPlay
`interval`	`number`	`5000`	docs:components.carousel.props.interval
`loop`	`boolean`	`true`	docs:components.carousel.props.loop
`pauseOnHover`	`boolean`	`true`	docs:components.carousel.props.pauseOnHover
`indicators`	`"dots" \| "bars" \| "numbers" \| "none"`	`"dots"`	docs:components.carousel.props.indicators
`indicatorPosition`	`"bottom" \| "top" \| "inside-bottom" \| "inside-top"`	`"bottom"`	docs:components.carousel.props.indicatorPosition
`showArrows`	`boolean`	`true`	docs:components.carousel.props.showArrows
`arrowPosition`	`"inside" \| "outside" \| "hidden"`	`"inside"`	docs:components.carousel.props.arrowPosition
`transition`	`"slide" \| "fade" \| "scale"`	`"slide"`	docs:components.carousel.props.transition
`transitionDuration`	`number`	`500`	docs:components.carousel.props.transitionDuration
`onSlideChange`	`(index: number) => void`	-	docs:components.carousel.props.onSlideChange
`showPlayPause`	`boolean`	`false`	Whether to show play/pause button for autoplay control
`playPausePosition`	`"left" \| "right" \| "center"`	`"right"`	Position of the play/pause button

docs:common.basicUsagetsx

import { Carousel } from '@hua-labs/ui/advanced';

// 높이는 부모 컨테이너에서 설정 (aspect-ratio 또는 고정 높이)
<div style={{ aspectRatio: '16/9' }}>
  <Carousel indicators="dots" indicatorPosition="inside-bottom">
    {slides.map(slide => <SlideContent {...slide} />)}
  </Carousel>
</div>

// 또는 고정 높이
<div className="h-[400px]">
  <Carousel>...</Carousel>
</div>

Auto Playtsx

<Carousel autoPlay interval={3000} pauseOnHover>
  {slides.map(slide => <SlideContent {...slide} />)}
</Carousel>

Transition Effectstsx

// fade, scale 효과도 loop 지원
<Carousel transition="fade" loop transitionDuration={500}>
  {slides.map(slide => <SlideContent {...slide} />)}
</Carousel>

•docs:components.carousel.accessibility.keyboardNavigation: docs:components.carousel.accessibility.keyboardNavigationDesc
•docs:components.carousel.accessibility.ariaRoles: docs:components.carousel.accessibility.ariaRolesDesc
•docs:components.carousel.accessibility.indicatorTabs: docs:components.carousel.accessibility.indicatorTabsDesc
•docs:components.carousel.accessibility.touchSupport: docs:components.carousel.accessibility.touchSupportDesc

PageTransitionPro VideoBackground