支付寶小程序基礎(chǔ)組件 圖標(biāo)·Icon

圖標(biāo)。

說(shuō)明：

• 跳轉(zhuǎn)頁(yè)面后左上角顯示返回主頁(yè) icon，不支持隱藏。
• icon 中所應(yīng)用的樣式如果是插件中的樣式，建議修改樣式定義的 class 名等這種信息，否則 icon 中不寫插件代碼顯示正常，添加插件代碼 icon 顯示不正常。

掃碼體驗(yàn)

示例代碼

<!-- API-DEMO page/component/icon.axml -->
<view class="page">
  <view class="page-description">圖標(biāo)</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>
// API-DEMO page/component/icon.js
Page({
  data: {
    iconSize: [20, 30, 40, 50, 60],
    iconColor: [
      'red', 'yellow', 'blue', 'green',
    ],
    iconType: [
      'success',
      'info',
      'warn',
      'waiting',
      'clear',
      'success_no_circle',
      'download',
      'cancel',
      'search',
    ],
  },
});
/* API-DEMO page/component/icon.acss */
.icon-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}


.item {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  margin-bottom: 10px;
  margin-right: 10px;
  align-items: center;
  -webkit-align-items: center;
}

屬性