@_nu/css-button 中文文档教程

发布于 4年前 浏览 24 项目主页 更新于 3年前

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]按钮形状
.nubtn:disabled, .nubtn[disabled]按钮不可用
.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;
}

逻辑组件

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文