@_nu/css-button 中文文档教程
Button
npm package | npm downloads | github | jsDelivr |
---|---|---|---|
怎么用?
$ yarn add @_nu/css-button
@_nu/css-button/
├── lib
│ ├── index.css // 核心代码
│ └── skins
│ ├── bootstrap.css // bootstrap 按钮皮肤
│ ├── loading.css // 按钮loading 效果
│ ├── material.css // material-ui 按钮皮肤
│ └── webnovel.css // webnovel 按钮皮肤
└── module // 和lib 一摸一样,除了多了一个文件后缀
├── index.module.css
└── skins
├── bootstrap.module.css
├── loading.module.css
├── material.module.css
└── webnovel.module.css
Skin library
API
选择器 | 功能 |
---|---|
.nu_btn | 默认的按钮选择器 |
.nubtn.[color] | 按钮颜色 |
.nubtn.[size] | 按钮尺寸 |
.nubtn.[variant] | 按钮形状 |
.nubtn:disabled, .nubtn[disabled] | 按钮不可用 |
.nu_btn._loading | loading 按钮 |
.nu_btn._capsule | 圆角按钮 |
.nu_btn._block | 占一行的按钮 |
.nu_btn._circle | 正圆按钮,这个并没有实现只是约定了名称 |
- 功能 | 颜色:
_default
、_primary
、_secondary
、_warning
、_success
、_danger
- 变体 | 形状:
_fill
、_ghost
- 尺寸:
_large
、_middle
、_small
- 其它:
_disabled
、_loading
、_block
、_capsule
、_circle
除了 颜色、形状、和尺寸是互斥的三个状态,其它选择器都是可以相互组合。
默认按钮大小,在large
和 middle
之间。
如何修改主题?
/** primary button */
.nu_btn._primary:not(._fill) {
color: blue;
}
.nu_btn._primary._fill {
background-color: blue;
}
/** warning button */
.nu_btn._warning:not(._fill) {
color: yellow;
}
.nu_btn._warning._fill {
background-color: yellow;
}
如何修改大小?
.nu_btn._large {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
}
/* 其它同理 */
如何修改状态?
.nu_btn:disabled,
.nu_btn[disabled] {
cursor: not-allowed;
pointer-events: none;
}