@hua-labs/ui
v1.0.0
bash
npm install @hua-labs/huatsx
import { ScrollArea } from "@hua-labs/hua";orientation | "vertical" | "horizontal" | "both" | "vertical" | Scroll direction |
type | "auto" | "always" | "scroll" | "hover" | "hover" | Scrollbar visibility behavior |
scrollHideDelay | number | 600 | Delay before scrollbar hides (ms) |
className | string | - | Additional CSS classes |
children* | ReactNode | - | Content to scroll |
hoveralwaysautoscrolldocs:common.basicUsagetsx
1import { ScrollArea } from "@hua-labs/hua";2 3function Example() {4 return (5 <ScrollArea className="h-48 w-full rounded-md border p-4">6 <div className="space-y-4">7 {Array.from({ length: 20 }).map((_, i) => (8 <div key={i} className="text-sm">9 Item {i + 1} - Lorem ipsum dolor sit amet10 </div>11 ))}12 </div>13 </ScrollArea>14 );15}Horizontaltsx
1<ScrollArea orientation="horizontal" className="w-full rounded-md border">2 <div className="flex gap-4 p-4">3 {Array.from({ length: 15 }).map((_, i) => (4 <div5 key={i}6 className="w-32 h-24 shrink-0 rounded-md bg-primary/20 flex items-center justify-center"7 >8 Card {i + 1}9 </div>10 ))}11 </div>12</ScrollArea>Always Visibletsx
1<ScrollArea type="always" className="h-48 w-full rounded-md border p-4">2 <div className="space-y-4">3 {Array.from({ length: 10 }).map((_, i) => (4 <div key={i} className="text-sm">5 Scrollbar is always visible - Item {i + 1}6 </div>7 ))}8 </div>9</ScrollArea>- •
ScrollBar-
- •Keyboard Navigation: Arrow keys and Page Up/Down for scrolling
- •Touch Support: Native touch scrolling on mobile devices
- •Focus Management: Focusable content remains accessible within scroll area