icon 图标

本文介绍图标组件的使用。

在线体验

属性

属性	类型	描述
type	String	icon 类型，有效值： info、warn、waiting、cancel、download、search、clear、success、success_no_circle。
size	Number	icon 大小，单位px。

示例代码

.axml示例代码：

<!--page/component/icon.axml-->
<view class="page">
  <view class="page-description">图标</view>
  <view class="page-section">
    <view class="page-section-title">Type</view>
    <view class="page-section-demo icon-list">
      <block a:for="{{iconType}}">
        <view class="item">
          <icon type="{{item}}" size="45"/>
          <text>{{item}}</text>
        </view>
      </block>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">Size</view>
    <view class="page-section-demo icon-list">
      <block a:for="{{iconSize}}">
        <view class="item">
          <icon type="success" size="{{item}}"/>
          <text>{{item}}</text>
        </view>
      </block>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">Color</view>
    <view class="page-section-demo icon-list">
      <block a:for="{{iconColor}}">
        <view class="item">
          <icon type="success" size="45" color="{{item}}"/>
          <text style="color:{{item}}">{{item}}</text>
        </view>
      </block>
    </view>
  </view>
</view>>
</block>

.js示例代码：

.acss示例代码：

在线体验#

属性#

示例代码#

在线体验

属性

示例代码