vision-ui v2.0.13
娱票儿 公共组件库
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
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;
}
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago