スクロールする補足
表示領域を意図的に制限する時に ScrollArea を使います。
重要な操作を見えない位置に隠さず、スクロールが必要な領域だと分かるようにします。
長い補足文は、ページ全体を押し広げずにパネル内へ収められます。
このパターンは、補助情報、プレビュー、詳細説明などの二次的な内容に使います。
主要な操作が含まれる場合は、操作そのものをスクロール領域の外に置きます。
スクロール領域ScrollAreaExperimental
表示領域を意図的に制限し、縦横スクロールを一貫したスタイルで扱います。
プレビュー
状態とバリエーション
リスト
高さが決まったパネル内に長いリストを収めます。
本文
補足文や説明文をパネル内でスクロールさせます。
横スクロール
幅の広い項目列を、横方向のスクロールとして扱います。
縦横スクロール
横幅も高さも制限した表やワークスペースを、縦横両方にスクロールできます。
常時表示
スクロール可能であることを常に示したい場合に使います。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| type | "auto" | "always" | "scroll" | "hover" | "hover" | スクロールバーの表示タイミングです。 |
| scrollHideDelay | number | 600 | スクロールバーが隠れるまでの遅延です。 |
| scrollbarOrientation | "vertical" | "horizontal" | "both" | "vertical" | 自動描画するスクロールバーの向きです。 |
| viewportClassName | string | - | viewport に追加する className です。 |
| scrollbarClassName | string | - | スクロールバーに追加する className です。 |
| thumbClassName | string | - | つまみに追加する className です。 |
使い方
import { ScrollArea, Separator } from "@gunjo/ui";
const releases = Array.from({ length: 18 }, (_, index) => `v2.${Math.floor((18 - index) / 3)}.${18 - index}`);
export function ReleaseList() {
return (
<ScrollArea className="h-56 w-full max-w-sm rounded-md border bg-background p-4">
<div className="mb-3 text-sm font-medium">リリース</div>
{releases.map((release) => (
<div key={release}>
<div className="text-sm">{release}</div>
<Separator className="my-2" />
</div>
))}
</ScrollArea>
);
}使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。