ScrollIndicator

v1.1.0

스크롤 가능함을 표시하는 애니메이션 인디케이터입니다. 클릭 시 대상 요소나 다음 섹션으로 스크롤합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

데모 영역

이름	타입	기본값	설명
`targetId`	`string`	-	Element ID to scroll to on click
`text`	`string`	`"Scroll down"`	Display text
`position`	`"bottom-center" \| "bottom-left" \| "bottom-right"`	`"bottom-center"`	Display position
`variant`	`"default" \| "primary" \| "secondary" \| "outline"`	`"default"`	Color variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Text size
`animated`	`boolean`	`true`	Enable bounce animation
`autoHide`	`boolean`	`true`	Auto hide on scroll
`hideThreshold`	`number`	`100`	Hide after scrolling this many pixels
`iconName`	`IconName`	-	Icon to display
`iconSize`	`number`	-	Icon size (pixels)

docs:common.basicUsagetsx

1import { ScrollIndicator } from '@hua-labs/ui/navigation';
2 
3<div className="relative min-h-screen">
4  <ScrollIndicator />
5</div>

docs:components.scrollIndicator.examples.scrollToElementtsx

1<ScrollIndicator
2  targetId="features-section"
3  text="See Features"
4  position="bottom-right"
5  variant="primary"
6/>

docs:components.scrollIndicator.examples.customSettingstsx

1<ScrollIndicator
2  text="더 보기"
3  animated
4  autoHide={false}
5  size="lg"
6/>