# @y-fe/nu-button

> NU 「 no-ui 」 组件库系统 nu-system 「 按钮组件 」

Latest version **0.0.5** (published 2019-06-14) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @y-fe/nu-button
pnpm add @y-fe/nu-button
yarn add @y-fe/nu-button
bun add @y-fe/nu-button
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2019-06-14 |
| First published | 2019-05-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ziven27 |
| Maintainers | ziven27 |
| Keywords | !ui, button, button-system, css |

## Links

- npm: https://www.npmjs.com/package/@y-fe/nu-button
- Repository: https://github.com/yued-fe/nu-system
- Homepage: https://yued-fe.github.io/nu-system/
- Issues: https://github.com/yued-fe/nu-system/issues
- npm.io page: https://npm.io/package/@y-fe/nu-button

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2019-06-14
- 0.0.4 — 2019-06-13
- 0.0.3 — 2019-05-28
- 0.0.2 — 2019-05-27
- 0.0.1 — 2019-05-23

## README

# nu-button

```HTML
<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

<iframe height="480" style="width: 100%;" scrolling="no" title="wbXgba" src="//codepen.io/ziven27/embed/wbXgba/?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/ziven27/pen/wbXgba/'>wbXgba</a> by ziven27
  (<a href='https://codepen.io/ziven27'>@ziven27</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

### Material

<iframe height="480" style="width: 100%;" scrolling="no" title="nu-button-material" src="//codepen.io/ziven27/embed/rgKyap/?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/ziven27/pen/rgKyap/'>nu-button-material</a> by ziven27
  (<a href='https://codepen.io/ziven27'>@ziven27</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


### Webnovel

<iframe height="480" style="width: 100%;" scrolling="no" title="nu-button-webnovel" src="//codepen.io/ziven27/embed/byKqEe/?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/ziven27/pen/byKqEe/'>nu-button-webnovel</a> by ziven27
  (<a href='https://codepen.io/ziven27'>@ziven27</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 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._loading | loading按钮 |
| .nu_btn._capsule | 圆角按钮 💊 |
| .nu_btn._block | 占一行的按钮 |

- **功能 | 颜色**: `_default`、`_primary`、`_secondary`、`_warning`、`_success`、`_danger`
- **变体 | 形状**: `_fill`、`_ghost`、`_link`
- **尺寸**: `_large`、`_middle`、`_small`
- **其它**: `_disabled`、`_loading`、`_block`、`_capsule`

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

约定变体默认状态是 `_fill`。

默认按钮大小，建议在`large`和 `middle`之间。

## 如何修改主题?

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

/* 其它同理 */
```

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

```css
.nu_btn._ghost._primary{
    border-color: red;
}
```
如果自动实现的代码不能满足你的需求，你可以这样定制。这里我们将 ghost 主按钮的边框改成了红色。

## 如何修改大小？

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

## 如何修改状态？

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

## Logic Only

- [nu-button-react](https://yued-fe.github.io/nu-react/packages/button)
- [nu-button-vue](https://yued-fe.github.io/nu-vue/packages/button)

## Npm cdn

```HTML
<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">
```

---
_Source: https://npm.io/package/@y-fe/nu-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._