スクロールシャドウ
コンテンツがスクロールでオーバーフローしたときに、上部と下部に影を適用します。
インストール
npx nextui-cli@latest add scroll-shadow
上記のコマンドは個別インストール専用です。もし @nextui-org/react がグローバルにインストール済みの場合は、このステップをスキップできます。
インポート
使用方法
スクロールバーを非表示にする
hideScrollBar プロパティを使用すると、縦横のスクロールバーを非表示にできます。
カスタムシャドウサイズ
デフォルトでは、シャドウのサイズはピクセル単位で 40 ですが、size プロパティを使用して変更できます。
水平方向
水平スクロールにシャドウを適用する必要がある場合は、orientation プロパティを horizontal に設定できます。
シャドウオフセット
デフォルトでは、シャドウオフセットはピクセル単位で 0 ですが、offset プロパティを使用して変更できます。これにより、特定の場所にシャドウを適用できます。
API
ShadowScrollのプロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| size | number | シャドウのサイズ（ピクセル単位）。 | 40 |
| offset | number | シャドウを表示するスクロールオフセット（ピクセル単位）。 | 0 |
| hideScrollBar | boolean | スクロールバーを非表示にするかどうか。 | false |
| orientation | horizontal | vertical | スクロール方向。 | vertical |
| isEnabled | boolean | シャドウを有効にするかどうか。 | 真 |
| 可視性 | ScrollShadowVisibility | 影の可視性。（制御されます） | 自動 |
ShadowScroll イベント
| 属性 | 型 | 説明 |
|---|---|---|
| onVisibilityChange | (visibility: ScrollShadowVisibility) => void | 影の可視性が変更されたときに呼び出されるコールバック。 |
型
スクロール影の可視性
type ScrollShadowVisibility = "auto" | "top" | "bottom" | "left" | "right" | "both" | "none";
