ScrollIndicator

v1.1.0

bash

npm install @hua-labs/hua

tsx

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


`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)

Code Examples

docs:common.basicUsagetsx

1import { ScrollIndicator } from '@hua-labs/hua';
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/>

•aria-label: docs:components.scrollIndicator.accessibility.ariaLabel
•docs:components.scrollIndicator.accessibility.keyboard: docs:components.scrollIndicator.accessibility.keyboard