滚动阴影

当内容滚动溢出时,应用顶部和底部阴影。


安装

以上命令仅适用于单独安装。如果 @nextui-org/react 已全局安装,则可以跳过此步骤。

导入

用法

隐藏滚动条

您可以使用 hideScrollBar 属性来隐藏垂直和水平滚动条。

自定义阴影大小

默认情况下,阴影大小为 40 像素,但您可以使用 size 属性更改它。

水平方向

如果您需要在水平滚动上应用阴影,可以将 orientation 属性设置为 horizontal

阴影偏移量

默认情况下,阴影偏移量为 0 像素,但您可以使用 offset 属性更改它。这允许您将阴影应用于特定位置。

API

ScrollShadow 属性

属性类型默认值
大小
数值
"40"
偏移
数值
"0"
隐藏滚动条
布尔值
false
方向
水平 | 垂直
"vertical"
启用
布尔值
true
可见性
ScrollShadowVisibility
"auto"

ScrollShadow 事件

属性类型默认值
onVisibilityChange
(visibility: ScrollShadowVisibility) => void

类型

滚动阴影可见性