首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【指令篇】自定义mode实现平台样式选择

【指令篇】自定义mode实现平台样式选择

作者头像
IT晴天
发布2018-08-20 10:34:43
4410
发布2018-08-20 10:34:43
举报
文章被收录于专栏:ionic3+ionic3+

【技巧】ionic3的小彩蛋这篇文件中,提到过一个内容:

一些组件提供mode属性,方便选择不同平台样式,但是有部分组件是没提供的,这时可以考虑强行添加目标平台对应的类名来覆盖原有样式,但是会存在风险。现实现一个指令来移除原有平台类名,并添加新平台类名,以降低风险。

关于指令的简单介绍可以看此文:【开发指南】(六)ionic3应该善用组件和指令,在此我们命令行创建一个指令:

ionic g directive myMode

它会创建一个指令目录及文件,打开ts文件,修改内容如下:

import { Directive, Input, ElementRef } from '@angular/core';

interface classObj{
  old: string;   //旧类名
  new: string;   //新类名
}

@Directive({
  selector: '[myMode]' // Attribute selector
})
export class MyModeDirective {

  option: classObj;

  @Input('myMode')
  set myMode(option: classObj){
    this.setClass(option);
  };

  constructor(private el: ElementRef) {
    this.setClass(this.option);
  }

  private setClass(option: classObj){
    if(option){
      this.el.nativeElement.classList.remove(option.old);    //移除旧类名
      this.el.nativeElement.classList.add(option.new);    //添加新类名
    }
  }
}

代码很好理解,就是在构造函数和设定myMode值时,移除旧类名,添加新类名。

具体怎么使用呢?首先在app.module.ts里的declarations里添加声明:

@NgModule({
  declarations: [
    MyModeDirective
  ]
})

然后用时,在目标组件上添加类似代码:

  <ion-list radio-group>
    <ion-item class="item-md">
      <ion-label>Cord</ion-label>
      <ion-radio value="cord" [myMode]="{old:'radio-ios', new: 'radio-md'}"></ion-radio>
    </ion-item>
  
    <ion-item class="item-md">
      <ion-label>Duesenberg</ion-label>
      <ion-radio value="duesenberg" [myMode]="{old:'radio-ios', new: 'radio-md'}"></ion-radio>
    </ion-item>
  </ion-list>

最后看效果:

ios上使用md样式

其实原理在官方文档中没有说明,只是个人分析得出,属于偏方性质,慎用!有兴趣的可以看看源码和使用浏览器调试不同平台的样式看看。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.11.14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档