ScrollArea

OS 依存しないスクロールバーを持つ領域。

高さを固定した領域に、OS 標準ではないスクロールバーを付けます。ドロップダウンの中身や、長いログの表示に使います。

export const client = "only";

import { ScrollArea, Separator } from "@squadbase/vantage/ui";

const rows = Array.from({ length: 20 }, (_, i) => `2026-07-${String(i + 1).padStart(2, "0")}`);

export default function Example() {
  return (
    <ScrollArea className="h-56 w-72 rounded-lg border">
      <div className="p-4">
        {rows.map((day) => (
          <div key={day}>
            <div className="py-1.5 text-sm">{day} の取り込み</div>
            <Separator />
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

import { ScrollArea, ScrollBar } from "@squadbase/vantage/ui";

高さ（または幅）は className で指定します。既定は縦スクロールで、横に流したいときは ScrollBar orientation="horizontal" を子に置きます。

<ScrollArea className="w-96 whitespace-nowrap">
  <div className="flex gap-3">…</div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>