微信小程序官方组件展示之基础内容icon源码
2024-05-24 06:33:59
以下将展示微信小程序之基础内容icon源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。
功能描述：
图标组件。
属性说明：
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
| type | string | 是 | icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear | 1.0.0 | |
| size | number/string | 23 | 否 | icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。 | 1.0.0 |
| color | string | 否 | icon的颜色，同 css 的color | 1.0.0 |
示例代码：
JAVASCRIPT:
Page({data: {iconSize: [20, 30, 40, 50, 60, 70],iconColor: ['red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'],iconType: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear']}})WXML：
<view class="container"><view class="icon-box"><icon class="icon-box-img" 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 class="icon-box-img" 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 class="icon-box-img" 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 class="icon-box-img" 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 class="icon-box-img" 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-box"><view class="icon-small-wrp"><icon class="icon-small" type="success_no_circle" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">多选控件图标_已选择</view><view class="icon-box-desc">用于多选控件中，表示已选择该项目</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="circle" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">多选控件图标_未选择</view><view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="warn" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">错误提示</view><view class="icon-box-desc">用于在表单中表示出现错误</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="success" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">单选控件图标_已选择</view><view class="icon-box-desc">用于单选控件中，表示已选择该项目</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="download" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">下载</view><view class="icon-box-desc">用于表示可下载</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="info_circle" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">提示</view><view class="icon-box-desc">用于在表单中表示有信息提示</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="cancel" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">停止或关闭</view><view class="icon-box-desc">用于在表单中，表示关闭或停止</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="search" size="14"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">搜索</view><view class="icon-box-desc">用于搜索控件中，表示可搜索</view></view></view></view>
版权声明： 本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。
原文链接地址：
icon | 微信开放文档
微信小程序官方组件展示之基础内容icon源码相关推荐
- 微信小程序官方组件展示之地图map源码
以下将展示微信小程序之地图map源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档. 功能描述: 地图(v2.7.0 起支持同层渲染). 小程序解决方 ...
- range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器
早在一年多以前,我写过一篇微信小程序-省市区县三级联动选择器的文章,那时候小程序刚起步,网上找了很久没有相关的文献,官方也没有相关的组件,我就自己动手写了一个,也因为刚开始接触写的不是很好. 当时省市 ...
- node.js云学堂微信小程序学习系统的设计与实现毕业设计源码011735
Node.js云学堂微信小程序 摘要 信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课 ...
- 基于微信小程序的校园信息共享平台 毕业设计-附源码211615
校园信息共享平台 摘 要 随着信息技术的发展,各大高校已经建立了各自的部门信息系统,但是由于这些应用系统开发时间迥异,开发平台不同,开发技术差异化的原因,各个系统间缺乏关联,使得信息不能有效共享,逐渐 ...
- JAVA+基于微信小程序的校园信息共享平台 毕业设计-附源码211615
校园信息共享平台 摘 要 随着信息技术的发展,各大高校已经建立了各自的部门信息系统,但是由于这些应用系统开发时间迥异,开发平台不同,开发技术差异化的原因,各个系统间缺乏关联,使得信息不能有效共享,逐渐 ...
- JAVA基于微信小程序的校园信息共享平台毕业设计-附源码211615
摘 要 随着信息技术的发展,各大高校已经建立了各自的部门信息系统,但是由于这些应用系统开发时间迥异,开发平台不同,开发技术差异化的原因,各个系统间缺乏关联,使得信息不能有效共享,逐渐形成了" ...
- SSM基于微信小程序的外卖点餐系统 毕业设计-附源码2711704
基于微信小程序的外卖点餐系统的设计与实现 摘要 立足于当下餐饮行业现有的点餐模式,分析传统APP点餐的运作流程,结合微信小程序的特点设计新型的外卖点餐系统.近几年,人们生活水平日益提升,但工作强度和压 ...
- mysql基于微信小程序的化妆品商城系统设计与实现毕业设计源码041152
基于springboot微信小程序的化妆品商城系统 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户 ...
- SSM基于微信小程序的魔音影评交流平台-计算机毕设 附源码61758
SSM基于微信小程序的魔音影评交流平台 摘 要 随着人类向信息社会的不断迈进,风起云涌的信息时代正掀起一次新的革命,同时计算机网络技术高速发展,网络管理运用也变得越来越广泛.因此,建立一个基于微信小程 ...
最新文章
- Doxygen使用介绍
- 作为阿里的面试官，我有话想说
- mysql 服务器优化_如何对MySQL服务器进行调优
- flutter 动画json_Flutter 50: 图解动画小插曲之 Lottie 动画
- 软件_聚合搜索引擎[博]
- C++之stringstream(字符串与数字相互转换)
- mysql建表语句外键_mysql里面用语句怎么建立表外键的命令
- 阿里用的java编码规范积累
- 维宏控制卡win7 驱动_维宏控制系统驱动
- java 读取文件内容 方法
- 单尺度Retinex
- 光照贴图（个人笔记）
- 什么是实体-联系图（ER图）
- 新建 FrameMaker API 时引用目录的设置
- java long类型值不能为0_关于原始类型：Java：为什么不能将int转换为Long
- 计算机在汽车专业中的应用,浅谈计算机技术在汽车行业中的应用.doc
- 还不懂苹果的税收政策及结算问题？看这篇就够了！
- MIPI RFFE协议使用不完全指南（附上代码详解和参考资料）第一部分
- css 上下布局 flex,Css Flex布局
- 卡巴斯基KAV2013 – 免费一年 （六一活动）