HorizontalScroll

@hua-labs/ui/advanced

v1.0.0

스크롤 인디케이터와 스냅을 지원하는 가로 스크롤 컨테이너.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { HorizontalScroll } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Props

이름	타입	기본값
`children*`	`React.ReactNode`	-
`heightMultiplier`	`number`	`1`
`snap`	`boolean`	`false`
`onProgress`	`(progress: number) => void`	-
`dot`	`string`	-
`style`	`React.CSSProperties`	-

코드 예시

기본 사용법

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

export function HorizontalShowcase() {
  return (
    <HorizontalScroll>
      <div style={{ background: '#f0f9ff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        Panel 1
      </div>
      <div style={{ background: '#f0fdf4', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        Panel 2
      </div>
      <div style={{ background: '#fdf4ff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        Panel 3
      </div>
    </HorizontalScroll>
  );
}

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

<HorizontalScroll snap heightMultiplier={1.5}>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</HorizontalScroll>

import { useState } from 'react';
import { HorizontalScroll } from '@hua-labs/ui/advanced';

export function WithProgressTracker() {
  const [progress, setProgress] = useState(0);

  return (
    <>
      <div style={{ position: 'fixed', top: 16, right: 16, zIndex: 50 }}>
        {Math.round(progress * 100)}%
      </div>
      <HorizontalScroll onProgress={setProgress}>
        <div>Panel 1</div>
        <div>Panel 2</div>
        <div>Panel 3</div>
      </HorizontalScroll>
    </>
  );
}

SpotlightCardPro ImageReveal