0.1.4 • Published 3 years ago

baijie-tpys v0.1.4

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

创建自己组件库的色彩体系:

  1. 系统色板 - 基础色版 + 中性色版
  2. 产品色版 - 品牌色 + 功能色版

组件库样式变量分类

  1. 基础色彩系统
  2. 字体系统
  3. 表单
  4. 按钮
  5. 边框和阴影
  6. 可配置开关

_variables.scss 配置基本的色彩系字体等基本属性 _reboots.scss 引入https://github.com/necolas/normalize.css 不同浏览器下的 margin padding 不太同意所以需要 normalize.css 使跨浏览器的样式保持高度的一致性

Button 组件需求分析:

  1. 不同的 Button Type primary Default Danger LinkButton(a 标签)

  2. 不同的 Button Size normal small large

  3. disabled 状态 disabled(不可点击) a(不可点击)

    npm install classnames --save // 便于切换类名 npm install @types/classnames --save

Menu 组件需求分析:

  1. 横向,竖向
  2. 高亮选中态
  3. 不可点击态
  4. 下拉菜单

方案一:

const items = [
   {},
   {}
]
<Menu defaultIndex={0} items={items} onSelect={} mode="vertical"></Menu>

方案二:

<Menu defaultIndex={0} onSelect={} mode="vertical">
<Menu.Item>
title one
</Menu.item>
<Menu.Item disabiled>
title two
</Menu.item>
<Menu.Item>
<a href="xxx">title three</a>
<Menu.item>
</Menu>

组件测试 高质量的代码 更早的发现 bug,减少成本 让重构和升级变得更加容易和可靠 让开发流程更加敏捷

Manual ui test service test unit test

jest 组件库来做单元测试

react 测试工具 enzyme / react Testing library

地址:https://jestjs.io/