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;
}

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.0.13
    0
    • latest

Version History

Package Sidebar

Install

npm i vision-ui

Weekly Downloads

0

Version

2.0.13

License

MIT

Last publish

Collaborators

  • duanhong
  • fei_at_wepiao
  • feng.yin