Icon

其他 / Icon组件

感谢IONIC

因为Vimo是对Ionic的移植, 故Icon组件也是使用ionicons图标, ionicons地址点这里, ionicon根据ios和Android提供了两种同类型不同风格的图标.

另外,ionicon的图标不多, 但是包含了大多数移动端使用场景的icon, 故这部分没有用font-awesome替换.

支持自定义

如果有需要其他类型的图片可以使用自定义图标. 这里, icon可以支持ionicons/自定义imgClass:

1 .默认情况下使用ionicons图标

在name中传入ionicons的name即可(去除ion/mode信息)

 <vm-iocn name="star"></vm-iocn>                     --  根据平台选择, ios:ion-ios-star, md:ion-md-star
 <vm-iocn name="ios-star"></vm-iocn>                 --  在全平台都使用ion-ios-star图标
 <vm-iocn name="star"></vm-iocn>                     --  根据平台mode  ->  ion-ios-star/ion-android-star
 <vm-iocn ios="ios-home" md="md-home"></vm-iocn>     --  单独设定: ios平台使用ios-home, md平台使用md-home

2. 如果是自定义的图标icon

命名需要规范下, 用于区分ionicons.

 <vm-iocn name="icon-star"></vm-iocn>                --  icon-star

3. 自定义激活的类 activeName

 <vm-iocn name="home" activeName="star"></vm-iocn>  --  设定激活的class图标

可使用的Class

[small] - 小一版的icon

如何引入

// 引入
import Vmvm-iocn from 'vimo/lib/icon'
// 安装
Vue.component(vm-iocn.name, vm-iocn)
// 或者
export default{
  components: {
   VmIcon
 }
}

基础 / Icon图标

图标可以单独使用，也可以在一些组件中使用。
设置icon的name时，实际呈现的图标会根据mode的设置而变化，当然可也可以分别指定在ios|md模式下呈现不同的图标。

如何引入

// 引入
import VmIcon from 'vimo/lib/icon'
// 安装
Vue.component(VmIcon.name, VmIcon)
// 或者
export default{
  src: {
   VmIcon
 }
}