微信小程序组件解读和分析:四、icon图标
示例代码的运行效果如下:
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 > |
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 ; } |
属性
|
类型
|
默认值
|
说明
|
type
|
String
|
icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
|
|
size
|
int
|
23
|
icon的大小,单位px
|
color
|
Color
|
icon的颜色,同css的color
|
微信小程序组件解读和分析:四、icon图标的更多相关文章
- 微信小程序组件解读和分析:六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...
- 微信小程序组件解读和分析:五、text文本
text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...
- 微信小程序组件解读和分析:十四、slider滑动选择器
slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...
- 微信小程序组件解读和分析:十、input输入框
input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...
- 微信小程序组件解读和分析:八、checkbox复选项
checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...
- 微信小程序组件解读和分析:一、view(视图容器 )
view组件说明: 视图容器 跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...
- 微信小程序组件解读和分析:十五、switch 开关选择器
switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...
- 微信小程序组件解读和分析:十三、radio单选项目
radio单选项目组件说明: radio:单选项目. radio-group: 单项选择器,内部由多个<radio/>组成. radio单选项目示例代码运行效果如下: 下面是WXML代码: ...
- 微信小程序组件解读和分析:十二、picker滚动选择器
picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期 ...
随机推荐
- SAS编程基础 - 数据获取与数据集操作(1)
1. 数据来源 SAS数据来源主要有两种:一是通过input语句创建,另外一种方式是通过外部数据文件获取. 1.1 libname 1.2 odbc 1.3 passthrough 1.4 impor ...
- 【MySQL】Win7下修改MySQL5.5默认编码格式
一般安装MySQL程序过程中,有一步骤是选择MySQL的默认编码格式的,程序默认为Latin1编码格式,当然也可以选择第三个选项,手动选择gbk或utf8编码格式,以支持中文数据.如下图: 现在问题出 ...
- 关于MacBook怎么更新Android SDK
昨天公司的人给了我一个VPN,可是还是无法更新SDK,后来发现将下图: 通过VPN发送全部流量勾选以后就能够连接更新了,哎.处处皆学问,特此分享一下此经验. 喜欢的朋友关注我哦! 多谢支持
- 复制class文件到as中出现非法字符,须要class,interface货enum
问题如题,出现此情况是在导入eclipse项目到Android Studio出现这种错误, 非法字符: '\ufeff' 解决方式|错误: 须要class, interface或enum,查阅后了解到 ...
- 【POJ 1275】 Cashier Employment(差分约束系统的建立和求解)
[POJ 1275] Cashier Employment(差分约束系统的建立和求解) Cashier Employment Time Limit: 1000MS Memory Limit: 10 ...
- please get a license from www.texturepacker.com
我们在使用texturepacker创建资源后,在使用资源时出现下述问题:please get a license from www.texturepacker.com 如图: 这个是由于我们的版本号 ...
- Wordpress3.9开启多网站配置配置nginx进行局域网測试.
由于须要帮staff迁移一些数据, 所以想到了使用wordpress的多网站. 这个功能在wordpress3.0后就有了. 软件系统等信息: OS: linux debian wheezy php ...
- 同一个站点下,兼容不同版本的JQuery
https://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page Y ...
- ZOJ 1414:Number Steps
Number Steps Time Limit: 2 Seconds Memory Limit: 65536 KB Starting from point (0,0) on a plane, ...
- openstack horizon 学习(2) navigation、dashboard、panels
本章的主要内容是如何用horizon的navigation结构添加一个应用的面板. Horizon中提供了两种为应用添加panel的方法,一种是通过Pluggable Settings的方式,另一种是 ...