微信小程序组件解读和分析:四、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),日期 ...
随机推荐
- Mybatis 最强大的动态sql <where>标签
<select id="findActiveBlogLike" resultType="Blog"> SELECT * FROM BLOG WHER ...
- iOS 代码安全加固--反编译和代码混淆
一.class-dump反编译 1.将打包的ipa反编译下,.ipa改成.zip,并解压 6.右击—显示包内容,找到如下有个白框黑底的 7.将其复制到桌面xx文件夹中,在终端中输入相关命令 cd 进 ...
- javascript的继承方法
一.构造函数继承 该方法最简单,使用call或者apply方法,将父对象的构造函数绑定到子对象上. function Parent(name){ this.name = name; this.colo ...
- Replica Sets+Sharding方案之真枪实弹篇
话说在虚拟机中会报各种错误.在真实的环境中就不会那么痛苦了. 想了一下虚拟机中报错的原因有. 机器卡,处理的时间长就会抛出错误 还有虚拟机假设给的空间太小.也会报异常. 此处讲讲我的大致思路. 第一, ...
- 跨域CORS原理及调用详细演示样例
上篇博客介绍了JSONP原理,其不足,就是仅仅能使用GET提交.若传输的数据量大.这个JSONP方式就歇菜了.那这篇博客就来介绍还有一种跨域介绍方案-CORS. 相对JSONP,CORS支持P ...
- 服务器无法处理请求。 ---> 未将对象引用设置到对象的实例
服务器无法处理请求. ---> 未将对象引用设置到对象的实例. 简短说下我遇到的问题.webservice部署到服务器上后,访问方法报上面的错误,最终原因为改方法需要操作文件夹,加上了相应的权限 ...
- web 开发之js---js 中的定时器setTimeout(function,time),setinterval(function,time)
####10秒自动跳转 <div class="jf_register"> <h2>您好,欢迎光临<fmt:message key="b2c ...
- 在java中除去字符串(String)中的换行字符(\r \n \t)
我们先来看几个例子: 例1: public class Test { public static void main(String[] args) { String s = "'sds gd ...
- Eclipse 安装 Maven 插件的几种方法
转自:https://blog.csdn.net/oqqHun123/article/details/79674994 昨天直接在机器上配置了Maven环境,今天顺便把Eclipse等IDE环境配置好 ...
- Python基础 — Matplotlib
Matplotlib -- 简介 matplotlib是Python优秀的数据可视化第三方库: matplotlib库的效果可参考官网:http://matplotlib ...