From 7734b26b7ddb46eaa8b4ff8b26feab9a345cd873 Mon Sep 17 00:00:00 2001 From: yangchch6 <33412781+yangchch6@users.noreply.github.com> Date: Thu, 25 Apr 2019 14:37:32 +0800 Subject: [PATCH] =?UTF-8?q?Create=20tinper-bee-core=20=E6=95=B4=E4=BD=93?= =?UTF-8?q?=E6=96=87=E6=A1=A3.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tinper-bee-core 整体文档.md | 153 ++++++++++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 tinper-bee-core 整体文档.md diff --git a/tinper-bee-core 整体文档.md b/tinper-bee-core 整体文档.md new file mode 100644 index 0000000..9165862 --- /dev/null +++ b/tinper-bee-core 整体文档.md @@ -0,0 +1,153 @@ +# tinper-bee-core 整体文档 +tinper-bee组件库的核心样式及公用方法库 + +## 核心样式 +放在scss文件夹下,由index.scss统一导出 +包括 +- 重置浏览器样式 +- 全局样式设置 +- 图标样式 +- 波纹效果、阴影样式、文本及字体样式 +- 主辅色及常用颜色设置 + +## 工具方法库 + +### set-global +- 设置body字体及颜色 +- 设置图表间距 +- 设置显隐u-visible u-not-visible +- 设置边框u-border-top... + + + +### set-normalize +- 重置css样式 + +### set-resets +- 选择时删除文本阴影,及设置默认选中颜色 +- html5标签的跨浏览器样式适配 + +### util-iconfont +- 图标设定 + +### util-ripple +- 波动动画设定 + +### util-shadow +- 阴影样式设定 + +### util-utilities +- 垂直对齐样式 +- display样式 +- 文本换行,浅色 +- 文本位置 +- 文本大小写 +- 字体粗度 +- 字体大小 +- 清除浮动及左右浮动 +- 显示隐藏 +- 宽高常用预设样式 +- 常用margin,padding预设样式 +- visible,hidden的适配预设 + +### minxin-colors +- 调色板 +- [文档链接](http://tinper.org/dist/neoui/global/color.html) + +### minxin-mixins +- 该文件定义了很多可复用的功能模块,比如说border-radius和box-shadow等组合样式。 + +### minxin-palette +- 设置根据minxin-colors的颜色生成背景颜色和字体颜色 +- 在组件的Demo 示例中可直接添加该文件中的定义className。 + +### minxin-themeColors +- 设置主色和辅色等tinper-bee 中最常用的通用变量,即主题定制时可供用户配置的样式变量 + +### minxin-variables +- 默认变量 + - 默认字体 + - 默认颜色 + - 字体大小和粗细 + - 波纹效果 + - 贝塞尔曲线动画 + - 阴影 + - 常用z-index值设定 + - UI组件的预设 + + + +### js方法 + +#### keyCode对象 + +引入方法: + +``` +import keyCode from 'tinper-bee-core/lib/keyCode'; + +//或者 + +import { keyCode } from 'tinper-bee-core'; + +``` + +方法: + +- isTextModifyingKeyEvent 验证是否是特殊按键或组合按键 + +``` +handleKeyDown = (e) => { +if(keyCode.isTextModifyingKeyEvent(e)){ + //一些操作 +} +} +... + + +``` + +- isCharacterKey 验证是否是文本键 +``` +handleKeyDown = (e) => { +if(keyCode.isCharacterKey(e)){ + //一些操作 +} +} +... + + +``` + +#### toArray 将数组安全的转换为react element 数组 + +#### splitComponentProps 通过父组件的propTypes拆分分别传给父子组件的props + + +``` +const propTypes = { + color: PropTypes.string, + size: PropTypes.string +} +class ParentClass extends React.Component{ + render() { + let props = this.props; + let [parentProps, childProps] = splitComponentProps(props); + + return ( +