阅读(3635)
赞(0)
支付宝小程序其他手势 图标·Am-icon
2020-09-07 11:27:54 更新
图标。
扫码体验
示例代码
{
"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、 appx、barcode、 bill、 bill-note、 capslock、 chat、 check、circle、 close、 close-circle、 collect、 contacts、 content、down、 down-circle、 download、 eye、 eye-close、 file、gift、 good、 help、 home、 koubei、 left、 like、 limit、link、 location、 logo-alipays、 minus-square、 money、 money-circle、 more、 more-1、 net、 people、 person、 person-add、person-setting、 picture、 play、 qr、 question、 receipt、right、 sad、 scan、 scan-code、 search、 selected、setting、 share、 text、 time-5、 trash、 up、 voice、voice-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来改变； - 如果设置
size和color属性后无效，那么很大可能就是当前设备 不支持 CSS 自定义属性（CSS 变量），只能通过 className 方式来修改font-size和color的属性值。