0.1.4 • Published 3 years ago
baijie-tpys v0.1.4
创建自己组件库的色彩体系:
- 系统色板 - 基础色版 + 中性色版
- 产品色版 - 品牌色 + 功能色版
组件库样式变量分类
- 基础色彩系统
- 字体系统
- 表单
- 按钮
- 边框和阴影
- 可配置开关
_variables.scss 配置基本的色彩系字体等基本属性 _reboots.scss 引入https://github.com/necolas/normalize.css 不同浏览器下的 margin padding 不太同意所以需要 normalize.css 使跨浏览器的样式保持高度的一致性
Button 组件需求分析:
不同的 Button Type primary Default Danger LinkButton(a 标签)
不同的 Button Size normal small large
disabled 状态 disabled(不可点击) a(不可点击)
npm install classnames --save // 便于切换类名 npm install @types/classnames --save
Menu 组件需求分析:
- 横向,竖向
- 高亮选中态
- 不可点击态
- 下拉菜单
方案一:
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