图标

介绍

示例里仅展示了部分常用图标,全部图标请查看zebra-ui图标库

基本使用

图标除了可以使用组件库提供的图标外,还可以使用网络图片。

<z-icon name="happy" size="68rpx" />
<z-icon name="https://cdn.520ztc.com/zebra-ui/images/assets/demo-select.png" size="68rpx" />

提示信息

通过添加属性dot,可以为图标加入右上角的小红点,属性info可以在小红点中自定义内容

<z-icon name="happy" size="64rpx" dot />
<z-icon name="happy" size="64rpx" info="9" />
<z-icon name="happy" size="64rpx" info="99+" />

图标颜色

通过color属性为图标自定义颜色

<z-icon name="happy" size="64rpx" color="#1989fa" />

图标大小

通过size属性为图标指定尺寸,默认单位为rpx

<z-icon name="happy" size="80" />

API

Props

参数 说明 类型 可选值 默认值
class-prefix 类名前缀 string zebra-icon
name 图标名称或图片链接 string -
custom-style 自定义样式 object -
color 图标颜色 string inherit
size 图标大小,默认单位为 rpx string inherit
info 图标右上角文字提示 string|number null
dot 是否显示图标右上角小红点 boolean false

Events

事件名 回调参数 说明
click event object - event 点击事件,点击图标触发
touchstart event object - event 触摸事件,触摸图标触发(此事件也会触发 click 事件)