0.0.3 • Published 4 years ago

nd-button v0.0.3

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

尝试封装一个按钮组件

作者:ND

安装

  • 使用本组件请开启 border-box

    *{box-sizing: border-box}

    使用

  • 【暂时】需设置全局样式变量,才可自定义样式
    :root {
       --button-height: 32px;
       --font-size: 14px;
       --button-bg: white;
       --button-active-bg: #eee;
       --border-radius: 4px;
       --color: #999;
       --border-color: #999;
       --border-color-hover: #666;
    }
  1. 图标样式设置 利用icon-name属性,设置图标的种类样式
    icon-name="settings" //使用settings图标
  2. 图标位置设置 利用icon-position属性,设置图标的显示位置,可选值为:left、right
    icon-position="right" //图标居右
  3. 图标旋转设置 利用loading属性,设置旋转加载图标,可选值为:true、false
    loading="true" //将图标设置为一个旋转加载图标

part1

  1. 框架构建
  • 涉及内容 parcel sass Vue单文件组件 css变量 :root伪类选择器
  1. UI设计
  • 涉及内容 slot插槽 iconfont图标工具的运用及巧用em单位 父子组件传值 v-if控制按钮图标显示
  1. 测试
  • 涉及内容 chai断言库 chai-spies,自动测试:Karma测试运行器 Mocha测试框架 Sinon,持续集成:Travis CI npm发布
0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago