0.0.5 • Published 5 years ago

@y-fe/nu-button v0.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
5 years ago

nu-button

<a href="##" class="nu_btn _primary _ghost _large">大号的幽灵主按钮</a>

No UI 组件库系统 「 按钮组件 」。

怎么用?

$ npm i @y-fe/nu-button
$ yarn add @y-fe/nu-button
@y-fe/nu-button/css
├── core.css             // 核心代码
└── skins
    ├── bootstrap.css    // bootstrap 按钮皮肤
    ├── loading.css      // 按钮loading 效果
    ├── material.css     // material-ui  按钮皮肤
    └── webnovel.css     // webnovel  按钮皮肤

Skin library

Bootstrap

Material

Webnovel

API

选择器功能
.nu_btn默认的按钮选择器
.nu_btn._default默认按钮颜色
.nu_btn._primary主按钮
.nu_btn._secondary次级按钮
.nu_btn._warning警告按钮
.nu_btn._success成功按钮
.nu_btn._danger危险按钮
.nu_btn._large大号按钮
.nu_btn._middle中号按钮
.nu_btn._small小号按钮
.nu_btn._fill实心按钮
.nu_btn._ghost幽灵按钮 👻
.nu_btn._link链接按钮 🔗
.nu_btn._disabled不可用按钮
.nu_btn._loadingloading按钮
.nu_btn._capsule圆角按钮 💊
.nu_btn._block占一行的按钮
  • 功能 | 颜色: _default_primary_secondary_warning_success_danger
  • 变体 | 形状: _fill_ghost_link
  • 尺寸: _large_middle_small
  • 其它: _disabled_loading_block_capsule

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

约定变体默认状态是 _fill

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

如何修改主题?

.nu_btn._default{
    color:#333333;
}
.nu_btn._primary{
    color:blue;
}
.nu_btn._warning{
     color:yellow;
}

/* 其它同理 */

虽然 nu-button 约定了6种颜色,往往实际项目并不需要这么多的颜色,基于实际项目编写即可。 对于边框和背景颜色,组件内部会自动实现。

.nu_btn._ghost._primary{
    border-color: red;
}

如果自动实现的代码不能满足你的需求,你可以这样定制。这里我们将 ghost 主按钮的边框改成了红色。

如何修改大小?

.nu_btn._large {
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: .3rem;
}
/* 其它同理 */

如何修改状态?

.nu_btn._disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* 其它同理 */

Logic Only

Npm cdn

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@y-fe/nu-button/css/core.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@y-fe/nu-button/css/skins/loading.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@y-fe/nu-button/css/skins/material.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@y-fe/nu-button/css/skins/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@y-fe/nu-button/css/skins/webnovel.min.css">
0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago