ScrollArea

ნატიური სქროლი თხელი, თემის ფერის scrollbar-ებით (Base UI ScrollArea). type="hover"-ის დროს scrollbar ჩნდება hover-ზე ან სქროლისას და უმოქმედობისას ქრება.

მაგალითი

ნომერი 101სტანდარტი
ნომერი 102დელუქსი
ნომერი 103სუიტი
ნომერი 104სტანდარტი
ნომერი 105დელუქსი
ნომერი 106სუიტი
ნომერი 107სტანდარტი
ნომერი 108დელუქსი
ნომერი 109სუიტი
ნომერი 110სტანდარტი
ნომერი 111დელუქსი
ნომერი 112სუიტი
ნომერი 113სტანდარტი
ნომერი 114დელუქსი
ნომერი 115სუიტი
ნომერი 116სტანდარტი
ნომერი 117დელუქსი
ნომერი 118სუიტი
ნომერი 119სტანდარტი
ნომერი 120დელუქსი

@llc-conciergia/ui/scroll-area

import { ScrollArea } from "@llc-conciergia/ui/scroll-area";

<ScrollArea aria-label="ნომრების სია" className="h-64 w-64 rounded-lg border">
  <ul className="p-3">
    {rooms.map((room) => <li key={room.number}>ნომერი {room.number}</li>)}
  </ul>
</ScrollArea>

ინსტალაცია

terminal

pnpm add @llc-conciergia/ui

იმპორტი

import { ScrollArea } from "@llc-conciergia/ui/scroll-area";

Conciergia CLI

npx @llc-conciergia/cli add scroll-area

shadcn CLI

npx shadcn@latest add https://ui.conciergia.co/r/scroll-area.json

შენიშვნები

სიმაღლე ან max-h root-ზე მიეცით. viewport ფოკუსირებადია, როცა კონტენტი გადადის, ამიტომ კლავიატურით ისრებით/Page Down-ით სქროლდება; aria-label-ით ის სახელიან region-ად იქცევა. ScrollBar, ScrollAreaViewport, ScrollAreaContent და ScrollAreaCorner ცალკეც ექსპორტირებულია საკუთარი კომპოზიციისთვის.

Props

Prop	ტიპი	ნაგულისხმევი	აღწერა
orientation	"vertical" \| "horizontal" \| "both"	"vertical"	რომელი scrollbar-ები გამოჩნდეს.
type	"hover" \| "always"	"hover"	hover — ქრება უმოქმედობისას; always — ყოველთვის ჩანს.
viewportClassName	string	—	კლასები viewport-ზე (padding).
aria-label	string	—	viewport-ის სახელი (role=region).
overflowEdgeThreshold	number \| { xStart; xEnd; yStart; yEnd }	0	data-overflow-* ატრიბუტების ზღვარი (Base UI).
ScrollBar: orientation / type / keepMounted	"vertical" \| "horizontal" / "hover" \| "always" / boolean	"vertical" / "hover" / false	ცალკე scrollbar საკუთარი კომპოზიციისთვის.