Welink React-ui基础组件Icon

网友投稿 579 2022-05-29

Icon

图标。Icon UI 提供与WeLink规范一致的视图。

import React from 'react';

import PropTypes from 'prop-types';

import { Grids, Article } from '@wecode/react-weui';

import './icons.less';

const IconBox = function (props) {

const { icon, title, desc } = props;

return (

{icon}

{title}

{desc}

);

};

IconBox.propTypes = {

icon: PropTypes.object,

title: PropTypes.string,

desc: PropTypes.string

};

export default function IconDemo() {

return (

导航栏

icon: ,

label: '默认头像',

href: 'javascript:;'

}, {

icon: ,

label: '返回箭头',

href: 'javascript:;'

}, {

icon: ,

label: '返回箭头按压',

href: 'javascript:;'

}, {

icon: ,

label: '消息通话',

href: 'javascript:;'

}, {

icon: ,

label: '消息通话按压',

href: 'javascript:;'

}, {

icon: ,

label: '更多',

href: 'javascript:;'

}, {

icon: ,

label: '更多按压',

href: 'javascript:;'

}, {

icon: ,

label: '拨打电话',

href: 'javascript:;'

}, {

icon: ,

label: '拨打电话按压',

href: 'javascript:;'

}, {

icon: ,

label: '个人设置',

href: 'javascript:;'

}, {

icon: ,

label: '个人设置按压',

href: 'javascript:;'

}, {

icon: ,

label: '群聊信息',

href: 'javascript:;'

}, {

icon: ,

label: '群聊信息按压',

href: 'javascript:;'

}, {

icon: ,

label: '下拉箭头',

href: 'javascript:;'

}, {

icon: ,

label: '邮件新建',

href: 'javascript:;'

}, {

icon: ,

label: '邮件新建按压',

href: 'javascript:;'

}, {

icon: ,

label: '邮件上一页',

href: 'javascript:;'

}, {

icon: ,

label: '邮件上一页按压',

href: 'javascript:;'

}, {

icon: ,

label: '我的组织',

href: 'javascript:;'

}, {

icon: ,

label: '我的组织按压',

href: 'javascript:;'

}, {

icon: ,

label: '阅读历史',

href: 'javascript:;'

}, {

icon: ,

label: '阅读历史按压',

href: 'javascript:;'

}, {

icon: ,

label: '卡片管理',

href: 'javascript:;'

}, {

icon: ,

label: '卡片管理按压',

href: 'javascript:;'

}, {

icon: ,

label: '云空间上传',

href: 'javascript:;'

}, {

icon: ,

label: '云空间上传按压',

href: 'javascript:;'

}, {

icon: ,

label: '更多',

href: 'javascript:;'

}, {

icon: ,

label: '更多按压',

href: 'javascript:;'

}, {

icon: ,

label: '分享',

href: 'javascript:;'

}, {

icon: ,

label: '分享按压',

href: 'javascript:;'

}, {

icon: ,

label: '扫一扫',

href: 'javascript:;'

}, {

icon: ,

label: '扫一扫按压',

href: 'javascript:;'

}, {

icon: ,

label: '搜索',

href: 'javascript:;'

}, {

icon: ,

label: '搜索按压',

href: 'javascript:;'

}]}

/>

12 * 12

icon: ,

label: '旗标',

href: 'javascript:;'

}, {

icon: ,

label: '异常、警示',

href: 'javascript:;'

}, {

icon: ,

label: '转发',

href: 'javascript:;'

}, {

icon: ,

label: '附件',

href: 'javascript:;'

}]}

/>

16 * 16

icon: ,

label: '放大镜',

href: 'javascript:;'

}, {

icon: ,

label: '清除文字',

href: 'javascript:;'

}, {

icon: ,

label: '右箭头',

href: 'javascript:;'

}, {

icon: ,

label: '下拉箭头',

href: 'javascript:;'

}, {

icon: ,

label: '向右箭头',

href: 'javascript:;'

}, {

icon: ,

label: '下拉箭头',

href: 'javascript:;'

}, {

icon: ,

label: '勾选',

href: 'javascript:;'

}]}

/>

24 * 24

icon: ,

label: '默认头像',

href: 'javascript:;'

}, {

icon: ,

label: '勾选框',

href: 'javascript:;'

}, {

icon: ,

label: '勾选框',

href: 'javascript:;'

}, {

icon: ,

label: '勾选框',

href: 'javascript:;'

}, {

icon: ,

label: '添加卡片',

href: 'javascript:;'

}, {

icon: ,

label: '删减卡片',

href: 'javascript:;'

}, {

icon: ,

label: '不可删减卡片',

href: 'javascript:;'

}, {

icon: ,

label: 'toast异常状态',

href: 'javascript:;'

}, {

icon: ,

label: '删除',

href: 'javascript:;'

}, {

icon: ,

label: '排序',

href: 'javascript:;'

}, {

icon: ,

label: '创建群聊',

href: 'javascript:;'

}, {

icon: ,

label: '未选',

href: 'javascript:;'

}, {

Welink React-ui基础组件Icon

icon: ,

label: '选中',

href: 'javascript:;'

}, {

icon: ,

label: '未选',

href: 'javascript:;'

}, {

icon: ,

label: '选中',

href: 'javascript:;'

}, {

icon: ,

label: '添加关注',

href: 'javascript:;'

}, {

icon: ,

label: '添加外部联系人',

href: 'javascript:;'

}, {

icon: ,

label: '扫一扫',

href: 'javascript:;'

}]}

/>

文本输入框

icon: ,

label: '表情',

href: 'javascript:;'

},

{

icon: ,

label: '键盘输入',

href: 'javascript:;'

},

{

icon: ,

label: '副媒体入口',

href: 'javascript:;'

},

{

icon: ,

label: '语音输入',

href: 'javascript:;'

}

]}

/>

标签栏

icon: ,

label: '消息未选',

href: 'javascript:;'

}, {

icon: ,

label: '消息选中',

href: 'javascript:;'

}, {

icon: ,

label: '邮件未选',

href: 'javascript:;'

}, {

icon: ,

label: '邮件选中',

href: 'javascript:;'

}, {

icon: ,

label: '通讯录未选',

href: 'javascript:;'

}, {

icon: ,

label: '通讯录选中',

href: 'javascript:;'

}, {

icon: ,

label: '业务未选',

href: 'javascript:;'

}, {

icon: ,

label: '业务选中',

href: 'javascript:;'

}, {

icon: ,

label: '知识未选',

href: 'javascript:;'

}, {

icon: ,

label: '知识选中',

href: 'javascript:;'

}, {

icon: ,

label: '云空间',

href: 'javascript:;'

}, {

icon: ,

label: '云空间选中',

href: 'javascript:;'

}, {

icon: ,

label: '团队',

href: 'javascript:;'

}, {

icon: ,

label: '团队选中',

href: 'javascript:;'

}, {

icon: ,

label: '共享给我的',

href: 'javascript:;'

}, {

icon: ,

label: '共享给我的选中',

href: 'javascript:;'

}, {

icon: ,

label: '传输列表',

href: 'javascript:;'

}, {

icon: ,

label: '传输列表选中',

href: 'javascript:;'

}]}

/>

文档类

icon: ,

label: 'Word',

href: 'javascript:;'

}, {

icon: ,

label: 'TXT',

href: 'javascript:;'

}, {

icon: ,

label: 'PPT',

href: 'javascript:;'

}, {

icon: ,

label: 'PDF',

href: 'javascript:;'

}, {

icon: ,

label: 'LOG',

href: 'javascript:;'

}, {

icon: ,

label: 'IPA',

href: 'javascript:;'

}, {

icon: ,

label: 'Excel',

href: 'javascript:;'

}, {

icon: ,

label: 'DMG',

href: 'javascript:;'

}, {

icon: ,

label: 'ZIP',

href: 'javascript:;'

}, {

icon: ,

label: 'Photo',

href: 'javascript:;'

}, {

icon: ,

label: 'Video',

href: 'javascript:;'

}, {

icon: ,

label: 'Code',

href: 'javascript:;'

}, {

icon: ,

label: 'Music',

href: 'javascript:;'

}]}

/>

);

}

WeLink

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:服务端I/O性能大比拼:Node、PHP、Java、Go
下一篇:lxd与lxc挂卷过程对比分析
相关文章