Skip to content

Latest commit

 

History

History
193 lines (144 loc) · 5.11 KB

README.zh-CN.md

File metadata and controls

193 lines (144 loc) · 5.11 KB

unocss-preset-scrollbar

NPM version npm

unocss 的滚动预设，一个简单的实例

简体中文 | English

安装

npm i unocss-preset-scrollbar unocss -D

使用

// unocss.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { presetScrollbar } from 'unocss-preset-scrollbar'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetScrollbar({
      // config
    }),
  ],
})
<div 
  class="scrollbar scrollbar-rounded scrollbar-w-4px scrollbar-radius-2 scrollbar-track-radius-4 scrollbar-thumb-radius-4"
/>

上述代码将生成如下的 css 代码：

/* layer: shortcuts */
.scrollbar::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-height);}
.scrollbar{overflow:auto;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);--scrollbar-track:#f5f5f5;--scrollbar-thumb:#ddd;--scrollbar-width:8px;--scrollbar-height:8px;--scrollbar-track-radius:4px;--scrollbar-thumb-radius:4px;}
.scrollbar-rounded::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-thumb-radius);}
.scrollbar-rounded::-webkit-scrollbar-track{border-radius:var(--scrollbar-track-radius);}
.scrollbar::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);}
.scrollbar::-webkit-scrollbar-track{background-color:var(--scrollbar-track);}
/* layer: default */
.scrollbar-radius-2{--scrollbar-track-radius:0.5rem;--scrollbar-thumb-radius:0.5rem;}
.scrollbar-thumb-radius-4{--scrollbar-thumb-radius:1rem;}
.scrollbar-track-radius-4{--scrollbar-track-radius:1rem;}
.scrollbar-w-4px{--scrollbar-width:4px;}

你也可以使用 Attributify Mode：

<div
  scrollbar="~ rounded"
/>

或者使用 @apply

import { defineConfig, presetAttributify, presetUno, transformerDirectives } from 'unocss'
import { presetScrollbar } from 'unocss-preset-scrollbar'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetScrollbar({
    }),
  ],
+  transformers: [
+    transformerDirectives(),
+  ],
})
.my-custom-scrollbar {
  @apply scrollbar scrollbar-rounded
}

配置

配置项 默认值 说明
scrollbarWidth 8px 默认的滚动条宽度
scrollbarHeight 8px 默认的滚动条高度
scrollbarTrackRadius 4px 默认的滚动条轨迹的圆角
scrollbarThumbRadius 4px 默认的滚动条滑块的圆角
scrollbarTrackColor #f5f5f5 默认的滚动条轨迹的背景色
scrollbarThumbColor #ddd 默认的滚动条滑块的背景色
numberToUnit value => `${value / 4}rem` 捕获到的数字转化成单位的方法
varPrefix '' 该预设生成的css变量的前缀
prefix '' 该预设生成的shortcuts加上前缀
noCompatible 'true' 如果为 false 的话 会使用 scrollbar-width 和 scrollbar-color 这两个规则，能够在Firefox上兼容, 但是scrollbar-h、scrollbar-w 以及 scrollbar-raidus 会失效

举个例子

<div class="scrollbar scrollbar-w-4">

如果你使用默认的配置，scrollbar-w-4 将会转化成 --scrollbar-width: 1rem

而如果你自定义 numberToUnit 项：

export default defineConfig({
  presets: [
    presetUno(),
    presetScrollbar({
      numberToUnit: value => `${value}px`,
    }),
  ],
})

将转化成 --scrollbar-width: 4px

规则

scrollbar

scrollbar-thin

.scrollbar-thin {
  scrollbar-width: thin; // 如果 noCompatible 为 true, 则不会生成该行
  --un-scrollbar-width: 8px;
  --un-scrollbar-height: 8px;
}

scrollbar-none

.scrollbar-none {
  scrollbar-width: none;
}

.scrollbar-none::-webkit-scrollbar {
  display:none;
}

rounded

scrollbar-rounded

使滚动条有圆角

颜色

scrollbar-(track|thumb)-color-<color>

设置轨迹或滑块的背景色

size

scrollbar-(radius|w|h|track-radius|thumb-radius)-(\d+?)([a-zA-Z]*?)

对应key 说明
raidus 设置轨迹和滑块的圆角
w 设置滚动条宽度
h 设置滚动条高度
track-radius 设置轨迹圆角
thumb-radius 设置滑块圆角

注意如果以数字结尾，则会通过 numberToUnit 转化成带有单位的长度，反之直接生成对应的单位长度。

注意想要设置滚动条的圆角，必须先使用 scrollbar-rounded

例如：

  • scrollbar-w-4 -> --scrollbar-width: 1rem
  • scrollbar-w-4px -> --scrollbar-width: 4px
  • scrollbar-w-4rem -> --scrollbar-width: 4rem

other

base starter-ts

License

MIT License © 2021 kkopite