スクロールする補足
表示領域を意図的に制限する時に 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 です。 |
使い方
Loading...