@hua-labs/ui
v1.1.0
bash
npm install @hua-labs/huatsx
import { ScrollToTop } from "@hua-labs/hua";defaultprimaryoutline
sm
md
lg
threshold | number | 400 | docs:components.scrollToTop.props.threshold |
smooth | boolean | true | docs:components.scrollToTop.props.smooth |
variant | "default" | "primary" | "secondary" | "outline" | "ghost" | "default" | docs:components.scrollToTop.props.variant |
size | "sm" | "md" | "lg" | "md" | docs:components.scrollToTop.props.size |
icon | IconName | "arrowUp" | docs:components.scrollToTop.props.icon |
showOnMount | boolean | false | docs:components.scrollToTop.props.showOnMount |
docs:common.basicUsagetsx
1import { ScrollToTop } from '@hua-labs/hua';2 3// Add to your layout or page4<ScrollToTop />docs:components.scrollToTop.examples.variantstsx
1// Default (glass morphism)2<ScrollToTop variant="default" />3 4// Primary (blue)5<ScrollToTop variant="primary" />6 7// Outline8<ScrollToTop variant="outline" />9 10// Ghost11<ScrollToTop variant="ghost" />docs:components.scrollToTop.examples.customtsx
1<ScrollToTop2 threshold={500} // Show after 500px scroll3 variant="primary"4 size="lg"5 smooth={true}6/>docs:components.scrollToTop.examples.positiontsx
1// Bottom right (default)2<ScrollToTop className="bottom-6 right-6" />3 4// Bottom left5<ScrollToTop className="bottom-6 left-6" />6 7// Bottom center8<ScrollToTop className="bottom-6 left-1/2 -translate-x-1/2" />- •
- •
- •
- •docs:components.scrollToTop.accessibility.ariaLabel: docs:components.scrollToTop.accessibility.ariaLabelDesc
- •docs:components.scrollToTop.accessibility.focusRing: docs:components.scrollToTop.accessibility.focusRingDesc
- •docs:common.accessibility.keyboard: docs:components.scrollToTop.accessibility.keyboardDesc