微信小程序组件解读和分析：四、icon图标

2024-08-26 23:18:17

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

43

44

45

46

47

48

49

50

51

52

53

<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>

<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

28

icon{

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图标组件的主要属性：

属性	类型	默认值	说明
type	String		icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	int	23	icon的大小，单位px
color	Color		icon的颜色，同css的color

点击查看原文

最新文章

热门文章