Button

npm package npm downloads jsdelivr github
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;
}

Logic Only

Last Updated: 5/16/2020, 3:33:45 PM