全部产品

AMIcon 图标

图标。

注意:

  • 建议使用体积较小的字体。
  • Amicon不支持 onTap 事件,可以在外层加一个 view 标签。
  • AMIcon 是自定义组件封装的扩展组件,上面没有提供点击事件;自行绑定一个点击事件,不会生效,可以到 modules 里面找到源码,修改源码来新增点击事件。

扫码体验

image.png

示例代码

// API-DEMO page/component/am-icon/am-icon.json
{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "am-icon": "mini-antui/es/am-icon/index"
  }
}

<!-- API-DEMO page/component/am-icon/am-icon.axml -->
<view>
  <view class="icon-title">基础</view>
  <view class="icon-list">
    <block a:for="{{basicTypes}}">
      <view class="icon-item">
        <am-icon type="{{item}}" />
        <text class="icon-desc">{{item}}</text>
      </view>
    </block>
  </view>
  <view class="icon-title">描边风格</view>
  <view class="icon-list">
    <block a:for="{{strokeTypes}}">
      <view class="icon-item">
        <am-icon type="{{item}}" />
        <text class="icon-desc">{{item}}</text>
      </view>
    </block>
  </view>
  <view class="icon-title">实心风格</view>
  <view class="icon-list">
    <block a:for="{{solidTypes}}">
      <view class="icon-item">
        <am-icon type="{{item}}" />
        <text class="icon-desc">{{item}}</text>
      </view>
    </block>
  </view>
</view>

// API-DEMO page/component/am-icom/am-icon.js
Page({
  data: {
    basicTypes: [
      'arrow-left',
      'arrow-up',
      'arrow-right',
      'arrow-down',
      'cross',
      'plus',
    ],
    strokeTypes: [
      'close-o',
      'dislike-o',
      'heart-o',
      'help-o',
      'like-o',
      'location-o',
      'info-o',
      'success-o',
      'wait-o',
      'warning-o',
      'star-o',
      'download',
      'friends',
      'circle',
      'delete',
      'charge',
      'card',
      'notice',
      'qrcode',
      'reload',
      'scan',
      'money',
      'search',
      'setting',
      'share',
      'zoom-in',
      'zoom-out',
    ],
    solidTypes: [
      'close',
      'dislike',
      'heart',
      'help',
      'like',
      'location',
      'info',
      'success',
      'wait',
      'warning',
      'star',
    ],
  },
});

/* API-DEMO page/component/am-icon/am-icon.acss */
.icon-title {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 10px;
  color: #333;
  font-size: 16px;
}

.icon-list {
  background: #fff;
}

.icon-item {
  display: inline-flex;
  width: 33.33333%;
  height: 80px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.icon-desc {
  margin-top: 10px;
}

属性

属性名描述类型必填
typeicon 类型,具体效果扫上面二维码预览(有效值请见下方表格)。String
sizeicon 大小,单位 px。String
coloricon 颜色,同 css 的 color。String

type 有效值

图标风格type有效值
基础类型arrow-leftarrow-uparrow-rightarrow-downcrossplus
描边风格close-odislike-oheart-ohelp-olike-olocation-oinfo-osuccess-owait-owarning-ostar-odownloadfriendscircledeletechargecardnoticeqrcodereloadscanmoneysearchsettingsharezoom-inzoom-out
实心风格closedislikehearthelplikelocationinfosuccesswaitwarningstar