React 入门(react框架)
546
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}
{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:;' }, { 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小时内删除侵权内容。