支付宝小程序其他手势 图标·Am-icon

2020-09-18 11:25 更新

图标。

扫码体验

示例代码

{
 "defaultTitle": "am-icon icon 图标",
 "usingComponents": {
   "am-icon": "mini-ali-ui/es/am-icon/index"
 }
}
<view class="icon-list">
 <block a:for="{{iconTypes}}">
   <view class="icon-item">
     <am-icon type="{{item}}" size="30" />
     <text class="icon-desc">{{item}}</text>
   </view>
 </block>
</view>
Page({
 data: {
   iconTypes: [
     'qr',
     'share',
     'picture',
     'add-square',
     'file',
     'text',
     'minus-square',
     'barcode',
     'wallet',
     'scan-code',
     'receipt',
     'down-circle',
     'bill-note',
     'trash',
     'bill',
     'scan',
     'content',
     'circle',
     'play',
     'limit',
     'money',
     'link',
     'zoom-in',
     'koubei',
     'location',
     'capslock',
     'time-5',
     'warn',
     'help',
     'close-circle',
     'selected',
     'search',
     'net',
     'chat',
     'contacts',
     'appx',
     'question',
     'person-setting',
     'setting',
     'like',
     'ant',
     'add',
     'more',
     'more-1',
     'zoom-out',
     'money-circle',
     'collect',
     'voice',
     'good',
     'voice-limit',
     'people',
     'person-add',
     'download',
     'sad',
     'left',
     'right',
     'eye-close',
     'eye',
     'koubei_',
     'star_',
     'check',
     'chat_',
     'help_',
     'key_',
     'lock_',
     'people_',
     'voice-limit_',
     'location_',
     'phone_',
     'logo-alipay_',
     'person-delete_',
     'wait_',
     'apps_',
     'microphone_',
     'pen_',
     'close_',
     'question_',
     'down_',
     'certified-check_',
     'certified-warn_',
     'sad_',
     'ant_',
     'time-5_',
     'warn_',
     'person-circle_',
     'time-3_',
     'check_',
     'logo-alipays',
     'like_',
     'home',
     'eye_',
     'edit_',
     'mail_',
     'forbid_',
     'eye-limit_',
     'delete-person_',
     'close',
     'address-book_',
     'person',
     'gift',
     'add-message',
     'alipay',
     'phone-book_',
     'delete_',
     'down',
     'up',
   ],
 },
 onLoad() {},
});

属性

属性 类型 默认值 描述 必填
className String - 自定义 class。
type String - icon 类型,具体效果扫上面二维码预览(有效值请见下方表格)。
size String 17 icon 大小,单位 px。
color String - icon 颜色,同 css 的 color。

type 有效值

图标风格 type 有效值
线条型 add、 add-message、 add-square、 alipay、 ant、 appxbarcode、 bill、 bill-note、 capslock、 chat、 checkcircle、 close、 close-circle、 collect、 contacts、 contentdown、 down-circle、 download、 eye、 eye-close filegift、 good、 help、 home、 koubei、 left、 like、 limitlink location logo-alipays、 minus-square、 money、 money-circle、 more、 more-1、 net、 people、 person、 person-addperson-setting、 picture、 play、 qr、 question、 receiptright、 sad、 scan、 scan-code、 search、 selectedsetting、 share、 text、 time-5、 trash、 up、 voicevoice-limit、 wallet、 warn、 zoom-in、 zoom-out
实心型 address-book_ ant_、 apps_、 certified-check_、 certified-warn_、 chat_、 check_、 close_、 delete_ delete-person_down_、 edit_、 eye_、 eye-limit_、 forbid_、 help_、 key_koubei_、 like_、 location_、 lock_、 logo-alipay_、 mail_microphone_、 pen_、 people_、 person-circle_、 person-delete_phone_、 phone-book_ question_、 sad_ star_、 time-3_time-5_、 voice-limit_ wait_、 warn_

Bug & Tip

  • size只需要填写纯数字,默认增加 px 单位,当安装 mini-ali-ui-rpx npm 包后,默认增加rpx 单位,仅仅只是默认增加的单位,具体的 size 将根据所填写的值而显示。比如 size="30",最终得到的可能就是 30px 或者 30rpx 的结果;
  • color 默认为空,可继承父级元素的颜色值;
  • am-icon 使用的是 iconfont 方式,如通过 className 方式控制大小,需要通过设置 font-size 来改变;
  • 如果设置 sizecolor 属性后无效,那么很大可能就是当前设备 不支持 CSS 自定义属性(CSS 变量),只能通过 className 方式来修改 font-sizecolor 的属性值。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号