Button
| npm package | npm downloads | jsdelivr | github |
|---|---|---|---|
 |  |  |
How?
$ yarn add @_nu/css-button
@_nu/css-button/css
├── core.css // core code
└── skins
├── bootstrap.css // skin of bootstrap
├── loading.css // skin of loading
├── material.css // skin of material-ui
└── webnovel.css // skin of webnovel
Skins
API
| 选择器 | 功能 |
|---|---|
| Selector | Function |
| :------------- | ------: |
| .nu_btn | base selector |
| .nu_btn._[color] | color style |
| .nu_btn._[size] | size of button |
| .nu_btn._[variant] | variant of button |
| .nu_btn:disabled, .nu_btn[disabled] | status of disabled |
| .nu_btn._loading | loading |
| .nu_btn._capsule | button like capsule 💊 |
| .nu_btn._block | block button |
| .nu_btn._circle | button circle |
- function | color:
_default、_primary、_secondary、_warning、_success、_danger - variant | shape:
_fill、_ghost、_link - size:
_large、_middle、_small - other:
_disabled、_loading、_block、_capsule、_circle
Except color, variant, and size, all selectors can be combined with each other.
The default state of the convention variant is _fill。
Default button size, between 'large' and 'middle'.。
Custom color?
.nu_btn._default{
color:#333333;
background-color:#333333;
}
.nu_btn._primary{
color:blue;
background-color:blue;
}
.nu_btn._warning{
color:yellow;
background-color:yellow;
}
Although nu-button specifies 6 colors, the actual project usually doesn't need so many colors, just write based on the actual project.
For border and background colors, the interior of the component is automatically implemented.
.nu_btn._ghost._primary{
border-color: red;
}
If the automated code doesn't meet your needs, you can customize it this way. Here we change the border of the ghost main button to red.
Custom size？
.nu_btn._large {
padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
}
Custom status？
.nu_btn._disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}