Icon 图标 |
您所在的位置：网站首页 › app图标变色的原因 › Icon 图标 |
|
# Icon 图标 基于字体的图标集，包含了大多数常见场景的图标。 # 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ # 基本使用通过形式来调用，设置name参数为图标名即可 # 修改图标的样式 通过color参数修改图标的颜色 通过size参数修改图标的大小，单位为rpx # 图片图标 1.3.0这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景，理论上，这个小图标应该为png格式的正方形图标。 上面说到，给组件的name参数传入一个图片的名称即可显示字体图标，这些名称中不能带有/斜杠符号，否则会被认为是传入了图片图标，同时，size参数 也被设置为这个图片图标的宽度，由于是图片，诸如颜色color等参数都会失效。 # API # Props 参数 说明 类型 默认值 可选值 name 图标名称，见示例图标集，如名称带有/，会被认为是图片图标 String - - color 图标颜色 String inherit - size 图标字体大小，单位rpx String | Number inherit - index 一个用于区分多个图标的值，点击图标时通过click事件传出 String - - hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详见：hover-class String - - label 图标右侧/下方的label文字 String - - label-size label字体大小，单位rpx String | Number 28 - label-color label字体颜色 String #606266 - margin-left label在右方时与图标的距离，单位rpx String | Number 6 - margin-top label在下方时与图标的距离，单位rpx String | Number 6 - label-pos label相对于图标的位置 String right bottom custom-style 1.3.0 图标的样式，可以设置字体大小，颜色等，对象形式，size和color优先级高于此参数 Object - - # Events 事件名 说明 回调参数 版本 click 点击图标时触发 index: 通过props传递的index值 - # 图标集 arrow-left-double arrow-right-double chat chat-fill red-packet red-packet-fill order checkbox-mark arrow-up-fill arrow-down-fill backspace photo photo-fill lock lock-fill lock-open lock-opened-fill hourglass hourglass-half-fill home home-fill fingerprint cut star star-fill share share-fill volume-up volume-up-fill volume-off volume-off-fill trash trash-fill rewind-right rewind-right-fill rewind-left rewind-left-fill shopping-cart shopping-cart-fill question question-circle question-circle-fill plus plus-circle plus-circle-fill tags tags-fill pause pause-circle pause-circle-fill play-circle play-circle-fill map map-fill phone phone-fill list list-dot man-delete man-add man-add-fill person-delete-fill info info-circle info-circle-fill minus minus-circle minus-circle-fill mic mic-off grid grid-fill eye eye-fill eye-off file-text file-text-fill edit-pen edit-pen-fill email email-fill download checkmark checkmark-circle checkmark-circle-fill clock clock-fill close close-circle close-circle-fill calendar calendar-fill car car-fill bell bell-fill bookmark bookmark-fill attach play-right play-right-fill play-left play-left-fill error error-circle error-circle-fill wifi wifi-off skip-back-left skip-forward-right search setting setting-fill volume volume-fill more-dot-fill more-circle more-circle-fill bag bag-fill arrow-upward arrow-downward arrow-leftward arrow-rightward arrow-up arrow-down arrow-left arrow-right rmb rmb-circle rmb-circle-fill thumb-up thumb-up-fill thumb-down thumb-down-fill coupon coupon-fill kefu-ermai server-fill server-man scan warning warning-fill google google-circle-fill chrome-circle-fill ie IE-circle-fill github-circle-fill android-fill android-circle-fill apple-fill camera camera-fill pushpin pushpin-fill minus-square-fill plus-square-fill heart heart-fill reload account account-fill minus-people-fill plus-people-fill integral integral-fill zhihu zhihu-circle-fill gift gift-fill zhifubao zhifubao-circle-fill weixin-fill weixin-circle-fill twitter twitter-circle-fill taobao taobao-circle-fill weibo weibo-circle-fill qq-fill qq-circle-fill moments moments-circel-fill qzone qzone-circle-fill facebook facebook-circle-fill baidu baidu-circle-fill zhuanfa← Color 色彩 Button 按钮 → |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |