Neanderthal Painting Monet

    tinper-bee-core

    2.0.38 • Public • Published

    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

    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)){
     //一些操作
    }
    }
    ...
    
    <Input onKeyDown={this.handleKeyDown} />
    
    • isCharacterKey 验证是否是文本键
    handleKeyDown = (e) => {
    if(keyCode.isCharacterKey(e)){
     //一些操作
    }
    }
    ...
    
    <Input onKeyDown={this.handleKeyDown} />
    

    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 (
                <div>
                    <ChildrenClass {...childProps} />
                </div>
            )
        }
    }
    
    ParentClass.propTypes = propTypes;
    
    

    createChainedFunction 创建链式调用方法

    用法:

    
    

    contains 检验是否包含

    Install

    npm i tinper-bee-core

    DownloadsWeekly Downloads

    815

    Version

    2.0.38

    License

    MIT

    Unpacked Size

    1.69 MB

    Total Files

    63

    Last publish

    Collaborators

    • honely1314
    • xiaoshutong
    • yonyoufed
    • jonyw
    • guoyongfeng
    • kvkens
    • whizbz
    • npm_yx
    • bjyxszd
    • tinper-bot
    • houjitong
    • gaox2025f
    • gcht163
    • cnkvkens
    • diozhu
    • wangjings123
    • liushaozhen
    • zhaoyuchief
    • boyuzhou
    • ahua52