ScrollProgress

v1.1.0

페이지 스크롤 위치를 표시하는 고정 진행률 바입니다. 그라디언트, 단색, 퍼센트 표시를 지원합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

이 페이지 상단에 진행률 바가 표시됩니다. 스크롤해보세요!

색상:

gradient

primary

ScrollProgress는 fixed 위치로 렌더링되어 페이지 상단/하단에 고정됩니다.

이름	타입	기본값	설명
`height`	`number`	`2`	Progress bar height (px)
`color`	`"default" \| "primary" \| "secondary" \| "gradient"`	`"gradient"`	Progress bar color
`position`	`"top" \| "bottom"`	`"top"`	Display position
`showPercentage`	`boolean`	`false`	Show percentage badge
`animated`	`boolean`	`true`	Enable smooth animation

docs:common.basicUsagetsx

1import { ScrollProgress } from '@hua-labs/ui';
2 
3// 페이지 상단에 그라디언트 진행률 바
4<ScrollProgress />

docs:components.scrollProgress.examples.customizationtsx

1<ScrollProgress
2  position="bottom"
3  color="primary"
4  height={4}
5  showPercentage
6/>