⼩程序icon图标使⽤详解
也许你迷茫,但是我想说,在你迷茫的同时,保持本⼼,过好今天就好。
icon 在⼩程序中⽤来显⽰图标。
1 icon 图标的基本使⽤
<view class="container">
<view class="icon-box">
<icon class="icon-box-img"type="success"size="44"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">成功</view>
<view class="icon-box-desc">⽤于表⽰操作顺利完成</view>
</view>
</view>
其实核⼼代码就是
<icon type="success"size="44"></icon>
type 是图标显⽰的类型 可取值 success, success_no_circle, info, warn, waiting, cancel, download, search, clear size 是图标显⽰的⼤⼩ 默认单位是 px
color 是图标的颜⾊
2 type 取值概述
2.1 info
info ⽤于表⽰信息提⽰;也常⽤于缺乏条件的操作拦截,提⽰⽤户所需信息
<icon type="info"size="44"></icon>
2.2 warn
默认,强烈警告,⽤于表⽰由于⽤户原因造成的负向结果;也⽤于表⽰操作后将引起不可挽回的严重后果的情况
icon图标库<icon type="warn"size="44"></icon>
我们也可以设置⼀个颜⾊,普通警告,⽤于表⽰操作后将引起⼀定后果的情况;也⽤于表⽰由于系统原因⽽造成的负向结果<icon type="warn"size="44"color="#C9C9C9"></icon>
2.3 info_circle
⽤于在表单中表⽰有信息提⽰
<icon type="info_circle"size="44"></icon>
2.4 waiting
⽤于表⽰等待,告知⽤户结果需等待
<icon type="waiting"size="44"></icon>
2.5 success_no_circle
⽤于多选控件中,表⽰已选择该项⽬
<icon type="success_no_circle"size="44"></icon>
2.6 circle
⽤于多选控件中,表⽰该项⽬可被选择,但还未选择
<icon type="circle"size="44"></icon>
2.7 circle
⽤于单选控件中,表⽰已选择该项⽬<icon type="success"size="44"></icon>
2.8 download
⽤于表⽰可下载
<icon type="download"size="44"></icon>
2.9 cancel
停⽌或关闭
<icontype="cancel" size="44"></icon>
2.10 search
⽤于搜索
<icon type="search"size="44"></icon>
完毕
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论