yylib-quick-mobile
Version:
yylib-quick-mobile
56 lines (52 loc) • 2.28 kB
JavaScript
/**
* Created by whh on 2017/12/26.
*/
import React, {Component} from 'react';
import { Grid,Icon,WingBlank,WhiteSpace } from 'antd-mobile';
import YYIcon from '../YYIcon'
class YYIconDemo extends Component {
render() {
const list = [
'check-circle', 'check', 'check-circle-o',
'cross-circle', 'cross', 'cross-circle-o',
'up', 'down', 'left',
'right', 'ellipsis',
'loading',
];
const listData = list.map(item => ({
icon: (<YYIcon type={item} />),
text: item,
}));
//icon获取方案
/*var list = document.getElementsByClassName('fontclass');
var listClazz = []
for(var i=0;i<list.length;i++){
var item = list[i].innerHTML.substr(6);
listClazz.push(item)
}
console.log(listClazz)*/
const listSvg = ["arrowDown", "arrowNext", "arrowBack", "arrowUp", "Discover", "Home", "Mine", "List", "Notice", "Add", "colletFill", "Create", "Edit", "Delete", "colletUnfill", "Find", "Image", "Scan", "Send", "Public", "approve", "submit", "attachment", "tablebody", "header", "shape"];
const listSvgData = listSvg.map(item => ({
icon: (<YYIcon type={item}/>),
text: item,
}));
const size = ['xxs', 'xs', 'sm', 'md', 'lg'];
const data = size.map(item => ({
icon: (<YYIcon type="Home" color="red" size={item}/>),
text: item,
}));
return (
<div>
<WingBlank><h3>基本 {'<YYIcon type="search" />'}</h3></WingBlank>
<Grid data={listData} columnNum={4} hasLine={false} activeStyle={false} />
<WhiteSpace size="lg"/>
<WingBlank><h3>大小 {'<YYIcon type="Home" size="lg"/>'}</h3></WingBlank>
<Grid data={data} columnNum={5} hasLine={false} activeStyle={false} />
<WhiteSpace size="lg"/>
<WingBlank><h3>用友建筑图标 {'<YYIcon type=“Home”/>'}</h3></WingBlank>
<Grid data={listSvgData} columnNum={4} hasLine={false} activeStyle={false} />
</div>
);
}
}
export default YYIconDemo