Skip to content

滚动条 Provider

@astryxdesign/core v0.7.1 · ScrollbarsProvider

属性 ​

属性类型默认值说明
enabledbooleantrue子树里要不要用自绘滚动条。设为 false 时子树不初始化,已经挂上的会被销毁。嵌套时内层覆盖外层。
autoHide'never' | 'scroll' | 'leave' | 'move''scroll'滚动条自动收起的时机。never 一直显示,scroll 滚动时显示,leave 指针离开后收起,move 指针移动时显示。
autoHideDelaynumber800自动收起前等待的毫秒数。
optionsScrollbarsOptions—透传给 OverlayScrollbars 的选项(PartialOptions)。最后深合并,优先级最高。

插槽 ​

插槽说明
default使用自绘滚动条的子树。

其它导出 ​

导出类型说明
useScrollbars(target: MaybeRefOrGetter<HTMLElement | null | undefined>, options?: UseScrollbarsOptions) => UseScrollbarsResult给自己写的滚动容器挂上自绘滚动条。外层没有 ScrollbarsProvider 时什么都不做。容器自己就是视口,子节点不动。要在 Provider 的后代组件里调用。
UseScrollbarsOptions{ enabled?: MaybeRefOrGetter<boolean> }useScrollbars 的第二个参数。enabled 默认 true,控制这个容器自己要不要用。外层 Provider 关闭时,写 true 也不生效。
UseScrollbarsResult{ active: Readonly<Ref<boolean>> }active 表示当前元素上是否已经挂上自绘滚动条。
ScrollbarsProviderProps类型上面属性表对应的类型。
ScrollbarsProviderSlots类型上面插槽表对应的类型。
ScrollbarsOptionsPartialOptionsOverlayScrollbars 的选项类型,options 属性用它。
ScrollbarsAutoHide'never' | 'scroll' | 'leave' | 'move'autoHide 的取值类型。
ScrollbarsContext类型Provider 向子树提供的内容:enabled、合并后的 options,以及 mount。
ScrollbarsHandle{ update, destroy }mount 返回的句柄,用来更新选项或销毁滚动条。
scrollbarsKeyInjectionKey<ScrollbarsContext>Provider 用的注入 key。

外观变量 ​

变量默认值说明
--astryx-scrollbar-size10px滚动条粗细。
--astryx-scrollbar-thumb次要文字色 45%滑块颜色。
--astryx-scrollbar-thumb-hover次要文字色 70%悬停和拖动时的滑块颜色。
--astryx-scrollbar-tracktransparent轨道背景。
--astryx-scrollbar-radius9999px轨道和滑块圆角。

原生属性 ​

组件本身不渲染元素,class 和 style 不会传下去。