vision-ui

    2.0.13 • Public • Published

    娱票儿 公共组件库

    NPM Version NPM Downloads

    http://192.168.101.70/

    Install

    npm install vision-ui --save
    
    

    Usage

    # es6 & webpack
    // import vision.css first
    import visioncss from 'vision-ui/lib/vision.css'
    // import components using es6
    import { Button, Icon, Label, Loading } from 'vision-ui'
    
    

    Theming

    step1

    • create vision.scss under your scss fold as followings
    @import 
        'vision-ui/components/variables',
        'my-theme.scss',
        'vision-ui/components/normalize',
        'vision-ui/components/components';
    

    step2

    • copy imgs assets into your scss folds
    cp -rf node_modules/vision-ui/components/imgs scss
    

    step3

    • edit my-theme.scss
    /* override variables definition in variables */
    
    $main-color: '#343536';
    $green:      '#3d3d3d';
    
    

    step4

    • using custom theme
    // in your js file
    import custom_vision_ui from 'scss/vision'
    import { Button, Icon, Label, Loading } from 'vision-ui'
    

    Demo

    vision-ui-customization

    Build and Publish

    Dev

    npm start # open page http://localhost:8000
    
    • Component => components/COMPONENT/index.js
    • Style => components/COMPONENT/style.scss
    • related Demo => components/COMPONENT/demo/basic.md

    Publish

    npm version patch # update npm version
    npm run pub # build and npm publish
    

    Others

    update icon set

    • 将原始字体文件 components/fonts/icomoon.svg 上传至 Icomoon.co, 按照需求更新后,打包下载新的字体文件,替换 vision-ui 中的原始字体文件
    • 运行 npm run webpack 指令, 将在 lib/fonts 目录下生成带内容 HASH 的新的字体文件,将它们更新到 静态资源库中, fonts 目录, 之后就会同步到线上去(etc. ://res.wxmovie.com/fonts/icomoon-xxxxxxx.ttf)
    • 更新 components/icon/style.scss 中的字体引用地址
    @font-face {
        font-family: 'ico-webfont-N';
        src: url('//res.wxmovie.com/fonts/icomoon-xxxxxxxx.woff') format('woff'),
             url('//res.wxmovie.com/fonts/icomoon-xxxxxxxx.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    

    Install

    npm i vision-ui

    DownloadsWeekly Downloads

    141

    Version

    2.0.13

    License

    MIT

    Last publish

    Collaborators

    • duanhong
    • fei_at_wepiao
    • feng.yin