微信小程序组件解读和分析:四、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),日期 ...
随机推荐
- 【Python】python扩展
当python的基本功能无法满足要求.或者是为了保密源码(.py).遇到性能瓶颈时,我们经常要扩展python,扩展语言能够是C/C++.Java.C#等. 为python创建扩展须要三个基本的步骤: ...
- C#.NET 如何在系统变量中加入新的环境变量
比如我要将C:\Windows\Microsoft.NET\Framework\v3.5这个目录加入环境变量 则在系统的环境变量中点击Path,编辑,然后加入一个分号";",然后粘 ...
- java实现floyd统计天津地铁的网站距离
一:说明 (1)使用floyd实现各个网站的计算记录和路径 (2)网站获取和初始距离依据外部文件得到 (3)结果以外部文件的形式存储 (4)网站间转乘,觉得初始值也为1 (5)代码凝视比較具体,如有疑 ...
- VB打开project时出现冲突名称提示
在敲机房时因为窗口命名不合适,我就改动了下窗口.可是保存后再打开的时候.却出现以下的提示: 这样的情况出现.通常是因为引用了别人的窗口文件,或者是改动窗口的名字可是就是找不到不论什么冲突的地方.事实上 ...
- python内置全局变量
vars()查看内置全局变量 以字典方式返回内置全局变量 #!/usr/bin/env python # -*- coding:utf8 -*- print(vars()) #输出 # {'__bui ...
- muduo源代码分析--Reactor模式在muduo中的使用
一. Reactor模式简单介绍 Reactor释义"反应堆",是一种事件驱动机制.和普通函数调用的不同之处在于:应用程序不是主动的调用某个API完毕处理.而是恰恰相反.React ...
- please get a license from www.texturepacker.com
我们在使用texturepacker创建资源后,在使用资源时出现下述问题:please get a license from www.texturepacker.com 如图: 这个是由于我们的版本号 ...
- Netty In Action中文版 - 第四章:Transports(传输)
本章内容 Transports(传输) NIO(non-blocking IO,New IO), OIO(Old IO,blocking IO), Local(本地), Embedded(嵌入式) U ...
- iOS 保存视频AVAssetWriter
错误的CMTime导致保存的视频无效,比如: frameTime CMTime 1122 600ths of a second value CMTimeValue 1122timescale CMTi ...
- swift 笔记 (二十一) —— 高级运算符
高级运算符 位运算符 按位取反: ~ 按位与运算: & 按位或运算: | 按位异或运算: ^ 按位左移运算: << 按位右移动算: >> 溢出运算符 自从swif ...