0.0.15 • Published 4 years ago

@_nu/css-button v0.0.15

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

Button

npm packagenpm downloadsgithubjsDelivr
npm packagenpm downloadsgithubjsdelivr

怎么用?

$ 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按钮形状
.nu_btn:disabled, .nu_btndisabled按钮不可用
.nu_btn._loadingloading 按钮
.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

除了 颜色、形状、和尺寸是互斥的三个状态,其它选择器都是可以相互组合。

默认按钮大小,在largemiddle之间。

如何修改主题?

/** 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;
}

逻辑组件

0.0.14

4 years ago

0.0.15

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago