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
<iframe height="600" style="width: 100%;" scrolling="no" title="nu-button-bootstrap" src="https://codepen.io/ziven27/embed/wbXgba?height=265&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen nu-button-bootstrap by ziven27 (@ziven27) on CodePen. </iframe>API
| 选择器 | 功能 |
|---|---|
| .nu_btn | 默认的按钮选择器 |
| .nubtn.[color] | 按钮颜色 |
| .nubtn.[size] | 按钮尺寸 |
| .nubtn.[variant] | 按钮形状 |
| .nu_btn:disabled, .nu_btn[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;
}