⼩程序组件解读和分析：四、icon图标
icon图标组件说明:
icon是⼀种图标格式，⽤于系统图标、软件图标等，这种图标扩展名为.icon、.ico。常见的软件或windows桌⾯上的那些图标⼀般都是ICON 格式的。在应⽤上⾯很多地⽅⽤到了icon图标，这样⽅便程序表述程序返回的操作状态,⽤户⼀眼就能看出应⽤返回的意思，提⾼⽤户体验，在的组件提供了常⽤的icon图标，详细使⽤看下⾯介绍!
icon图标组件⽤法说明：
在使⽤的icon的时候，使⽤icon标签，然后有type属性和size属性，
具体的属性看最后的属性总结，标签的使⽤参考下⾯的代码。
⽰例代码的运⾏效果如下：
下⾯是WXML代码：
[XML] 纯⽂本查看复制代码
01
02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42<view class="page">
<view class="page__hd">
<view class="page__title">Icons</view>
<view class="page__desc">图标</view>
</view>
<view class="page__bd">
<view class="icon-box">
<icon type="success"size="93"></icon>
<view class="icon-box__ctn">
<view class="icon-box__title">成功</view>
<view class="icon-box__desc">⽤于表⽰操作顺利达成</view>
</view>
</view>
<view class="icon-box">
<icon type="info"size="93"></icon>
<view class="icon-box__ctn">
<view class="icon-box__title">提⽰</view>
<view class="icon-box__desc">⽤于表⽰信息提⽰；也常⽤于缺乏条件的操作拦截，提⽰⽤户所需信息</view>            </view>
</view>
<view class="icon-box">
<icon type="warn"size="93"color="#C9C9C9"></icon>
<view class="icon-box__ctn">
<view class="icon-box__title">普通警告</view>
<view class="icon-box__desc">⽤于表⽰操作后将引起⼀定后果的情况</view>
</view>
</view>
<view class="icon-box">
<icon type="warn"size="93"></icon>
<view class="icon-box__ctn">
<view class="icon-box__title">强烈警告</view>
<view class="icon-box__desc">⽤于表⽰操作后将引起严重的不可挽回的后果的情况</view>
</view>
</view>
<view class="icon-box">
<icon type="waiting"size="93"></icon>
<view class="icon-box__ctn">
<view class="icon-box__title">等待</view>
<view class="icon-box__desc">⽤于表⽰等待</view>
</view>
</view>
<view class="icon_sp_area">
<icon type="success"size="23"></icon>
42 43 44 45 46 47 48 49 50 51 52 53            <icon type="success"size="23"></icon>
<icon type="success_no_circle"size="23"></icon>
<icon type="circle"size="23"></icon>
<icon type="warn"size="23"color="#F43530"></icon>            <icon type="download"size="23"></icon>
<icon type="info_circle"size="23"></icon>
<icon type="cancel"size="23"></icon>
<icon type="search"size="20"></icon>
</view>
</view>
</view>
下⾯是WXSS代码：[CSS] 纯⽂本查看复制代码01
02
03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28icon{
margin-right: 13px; }
.page__bd {
padding-left: 40px;    padding-right: 40px;    text-align: left;
}
.icon-box{
margin-bottom: 25px;    display: flex;
align-items: center; }
.icon-box__ctn{
flex-shrink: 100;
}
.
icon-box__title{
font-size: 20px;
}
.icon-box__desc{
margin-top: 6px;
font-size: 12px;
color: #888888;
}
.icon_sp_area {
margin-top: 10px;
text-align: left;
}
icon图标组件的主要属性：
icon图标库属性类型默认值说明
type String icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear size int23icon的⼤⼩，单位px
colorColor icon的颜⾊，同css的color

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。