Welink React-ui基礎(chǔ)組件Icon
Icon
圖標(biāo)。Icon UI 提供與WeLink規(guī)范一致的視圖。
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 (
導(dǎo)航欄
icon: , label: '默認(rèn)頭像', 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: '個人設(shè)置', href: 'javascript:;' }, { icon: , label: '個人設(shè)置按壓', 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: '旗標(biāo)', href: 'javascript:;' }, { icon: , label: '異常、警示', href: 'javascript:;' }, { icon: , label: '轉(zhuǎn)發(fā)', 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: '默認(rèn)頭像', 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異常狀態(tài)', href: 'javascript:;' }, { icon: , label: '刪除', href: 'javascript:;' }, { icon: , label: '排序', href: 'javascript:;' }, { icon: , label: '創(chuàng)建群聊', href: 'javascript:;' }, { icon: , label: '未選', href: 'javascript:;' }, { icon: , label: '選中', href: 'javascript:;' }, { icon: , label: '未選', href: 'javascript:;' }, { icon: , label: '選中', href: 'javascript:;' }, { icon: , label: '添加關(guān)注', href: 'javascript:;' }, { icon: , label: '添加外部聯(lián)系人', href: 'javascript:;' }, { icon: , label: '掃一掃', href: 'javascript:;' }]} />文本輸入框
icon: , label: '表情', href: 'javascript:;' }, { icon: , label: '鍵盤輸入', href: 'javascript:;' }, { icon: , label: '副媒體入口', href: 'javascript:;' }, { icon: , label: '語音輸入', href: 'javascript:;' } ]} />標(biāo)簽欄
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: '業(yè)務(wù)未選', href: 'javascript:;' }, { icon: , label: '業(yè)務(wù)選中', 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:;' }]} /> ); }
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。
相關(guān)文章
