- Notifications
You must be signed in to change notification settings - Fork4
Scrollbar for UnoCSS preset.
License
unocss-community/unocss-preset-scrollbar
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
aunocss preset for scrollbar，here is ademo
English |简体中文
npm i unocss-preset-scrollbar unocss -D
// unocss.config.tsimport{defineConfig,presetAttributify,presetUno}from'unocss'import{presetScrollbar}from'unocss-preset-scrollbar'exportdefaultdefineConfig({presets:[presetUno(),presetAttributify(),presetScrollbar({// config}),],})
<divclass="scrollbar scrollbar-rounded scrollbar-w-4px scrollbar-radius-2 scrollbar-track-radius-4 scrollbar-thumb-radius-4"/>
it will generate below 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;}
you can also useAttributify Mode：
<divscrollbar="~ rounded"/>
or use@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}
| Field | Default | Description |
|---|---|---|
scrollbarWidth | 8px | default scrollbar width |
scrollbarHeight | 8px | default scrollbar height |
scrollbarTrackRadius | 4px | default scrollbar track radius |
scrollbarThumbRadius | 4px | default scrollbar thumb radius |
scrollbarTrackColor | #f5f5f5 | default scrollbar track background color |
scrollbarThumbColor | #ddd | default scrollbar thumb background color |
numberToUnit | value => `${value / 4}rem` | number to unit |
varPrefix | '' | the css variable prefix of this preset |
prefix | '' | Apply prefix to all utilities and shortcuts |
noCompatible | 'true' | iffalse, it usescrollbar-width andscrollbar-color，work in Firefox, butscrollbar-h,scrollbar-w andscrollbar-radius will not work |
for example
<divclass="scrollbar scrollbar-w-4">
if we use default options，scrollbar-w-4 will generate--scrollbar-width: 1rem
if we set customnumberToUnit：
exportdefaultdefineConfig({presets:[presetUno(),presetScrollbar({numberToUnit:value=>`${value}px`,}),],})
will generate--scrollbar-width: 4px
scrollbar-thin
.scrollbar-thin {scrollbar-width: thin; // if noCompatible is true, remove this line--un-scrollbar-width:8px;--un-scrollbar-height:8px;}
scrollbar-none
.scrollbar-none {scrollbar-width: none;}.scrollbar-none::-webkit-scrollbar {display:none;}
scrollbar-rounded
Make thumb and track have rounded corners
scrollbar-(track|thumb)-color-<color>
set track or thumb background color
scrollbar-(radius|w|h|track-radius|thumb-radius)-(\d+?)([a-zA-Z]*?)
| type | description |
|---|---|
| radius | set thumb radius and track radius |
| w | set scrollbar width |
| h | set scrollbar height |
| track-radius | set track radius |
| thumb-radius | set thumb radius |
**Attention，**if it ends with number，the preset will use numberToUnit to generate length with number as params，Otherwise it will use the captured length information directly
for example：
scrollbar-w-4will be--scrollbar-width: 1remscrollbar-w-4pxwill be--scrollbar-width: 4pxscrollbar-w-4remwill be--scrollbar-width: 4rem
::: warningif setnoCompatible valuefalse，it not work:::
basestarter-ts
About
Scrollbar for UnoCSS preset.
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.