ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序icon图标使用详解

2021-12-03 15:31:49  阅读:230  来源: 互联网

标签:info 表示 控件 微信 用于 circle icon 图标


也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好。

icon 在微信小程序中用来显示图标。


1 icon 图标的基本使用

在这里插入图片描述

<view class="container">
  <view class="icon-box">
    <icon class="icon-box-img" type="success" size="44"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">成功</view>
      <view class="icon-box-desc">用于表示操作顺利完成</view>
    </view>
  </view>

其实核心代码就是

<icon  type="success" size="44"></icon>
  • type 是图标显示的类型 可取值 success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  • size 是图标显示的大小 默认单位是 px
  • color 是图标的颜色

2 type 取值概述

2.1 info

info 用于表示信息提示;也常用于缺乏条件的操作拦截,提示用户所需信息

<icon  type="info" size="44"></icon>

在这里插入图片描述

2.2 warn

默认,强烈警告,用于表示由于用户原因造成的负向结果;也用于表示操作后将引起不可挽回的严重后果的情况

<icon  type="warn" size="44"></icon>

在这里插入图片描述
我们也可以设置一个颜色,普通警告,用于表示操作后将引起一定后果的情况;也用于表示由于系统原因而造成的负向结果

<icon  type="warn" size="44" color="#C9C9C9"></icon>

在这里插入图片描述

2.3 info_circle

用于在表单中表示有信息提示

<icon type="info_circle" size="44"></icon>

在这里插入图片描述

2.4 waiting

用于表示等待,告知用户结果需等待

 <icon  type="waiting" size="44"></icon>

在这里插入图片描述

2.5 success_no_circle

用于多选控件中,表示已选择该项目

<icon type="success_no_circle" size="44"></icon>

在这里插入图片描述

2.6 circle

用于多选控件中,表示该项目可被选择,但还未选择

<icon type="circle" size="44"></icon>

在这里插入图片描述

2.7 circle

用于单选控件中,表示已选择该项目

 <icon  type="success" size="44"></icon>

在这里插入图片描述

2.8 download

用于表示可下载

 <icon type="download" size="44"></icon>

在这里插入图片描述

2.9 cancel

停止或关闭

<icontype="cancel" size="44"></icon>

在这里插入图片描述

2.10 search

用于搜索

<icon  type="search" size="44"></icon>

在这里插入图片描述


完毕

标签:info,表示,控件,微信,用于,circle,icon,图标
来源: https://blog.csdn.net/zl18603543572/article/details/121698501

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有