PandaUI

Appearance

Icon 图标 ​

PandaUI提供了一套日常开发过程中常用的图标集合。

基础用法 ​

通过 pd-icon 中设置 name 属性指定具体图标名称即可。

展开代码
html
<pd-icon name="gouwu"></pd-icon>
<pd-icon name="shanchu"></pd-icon>
<pd-icon name="shezhi"></pd-icon>
<pd-button type="primary" icon="sousuo">搜索</pd-button>
<pd-icon name="gouwu"></pd-icon>
<pd-icon name="shanchu"></pd-icon>
<pd-icon name="shezhi"></pd-icon>
<pd-button type="primary" icon="sousuo">搜索</pd-button>

图标集合 ​

diannao
cunchu
fasong
bianji
fujian
gaojing
luxian
jisuan
gouwu
kejian
bukejian
mima
dingwei
suyuan
shijian
shanchu
shipin
tupian
shousuo
sousuo
shouji
denglu
neirong
shuaxin
yingyong
zhanghao
yemian
shaixuan
wendang
zhankai
qingchu
peizhi
shezhi
xiaoxi
wancheng
zhifu
cuo
warning
info
dui

徽标提示 ​

徽标提示通常用于展示新消息数量、未读消息数量、红点提醒等功能，帮助用户快速发现和识别关键信息。

展开代码
html
<template>
  <pd-icon name="gouwu" dot></pd-icon>
  <pd-icon name="gouwu" dot badge="1"></pd-icon>
  <pd-icon name="gouwu" dot badge="1000"></pd-icon>
</template>
<template>
  <pd-icon name="gouwu" dot></pd-icon>
  <pd-icon name="gouwu" dot badge="1"></pd-icon>
  <pd-icon name="gouwu" dot badge="1000"></pd-icon>
</template>