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

野性酷女 2023-10-07 17:29 54阅读 0赞

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

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

1 icon 图标的基本使用

在这里插入图片描述

  1. <view class="container">
  2.   <view class="icon-box">
  3.     <icon class="icon-box-img" type="success" size="44"></icon>
  4.     <view class="icon-box-ctn">
  5.       <view class="icon-box-title">成功</view>
  6.       <view class="icon-box-desc">用于表示操作顺利完成</view>
  7.     </view>
  8.   </view>

其实核心代码就是

  1. <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 用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息

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

在这里插入图片描述

2.2 warn

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

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

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

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

在这里插入图片描述

2.3 info_circle

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

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

在这里插入图片描述

2.4 waiting

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

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

在这里插入图片描述

2.5 success_no_circle

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

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

在这里插入图片描述

2.6 circle

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

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

在这里插入图片描述

2.7 circle

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

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

在这里插入图片描述

2.8 download

用于表示可下载

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

在这里插入图片描述

2.9 cancel

停止或关闭

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

在这里插入图片描述

用于搜索

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

在这里插入图片描述

完毕

发表评论

表情：
评论列表 （有 0 条评论，54人围观）

还没有评论，来说两句吧...

相关阅读