# 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 ### minxin-palette - 设置根据minxin-colors的颜色生成背景颜色和字体颜色 ### minxin-themeColors - 设置主色和辅色 ### 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 (