Nine Pomeranian Monsters

    @_nu/css-button

    0.0.15 • Public • Published

    Button

    npm package npm downloads github jsDelivr
    npm package npm downloads github jsdelivr

    怎么用?

    $ 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

    <iframe height="600" style="width: 100%;" scrolling="no" title="nu-button-bootstrap" src="https://codepen.io/ziven27/embed/wbXgba?height=265&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen nu-button-bootstrap by ziven27 (@ziven27) on CodePen. </iframe>

    API

    选择器 功能
    .nu_btn 默认的按钮选择器
    .nubtn.[color] 按钮颜色
    .nubtn.[size] 按钮尺寸
    .nubtn.[variant] 按钮形状
    .nu_btn:disabled, .nu_btn[disabled] 按钮不可用
    .nu_btn._loading loading 按钮
    .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;
    }

    逻辑组件

    Install

    npm i @_nu/css-button

    DownloadsWeekly Downloads

    2

    Version

    0.0.15

    License

    MIT

    Unpacked Size

    27 kB

    Total Files

    15

    Last publish

    Collaborators

    • nanasun
    • ziven27