前端一般会听过阿里的Ant Design,而对于angular使用者,大多也听过ng-zorro(Ant Design for Angular的PC版),最近一次ng-zorro的更新,带来了新的开源迷弟:ng-zorro-mobile(Ant Design Mobile for Angular)。
打开ng-zorro-mobile官网,侧边栏很醒目地标示了在ionic中使用:
ionic使用
众所周知,ionic自身也是一个UI框架,涵盖绝大多数常用组件,但有些组件没有或不好用,就要借助第三方组件,现在有了ng-zorro-mobile,对ionic有了极大的补充。
在ionic中使用ng-zorro-mobile非常简单,先是创建项目,有ionic相关经验对下面几行代码非常熟悉:
#全局安装ionic-cli
npm install -g ionic
#使用ionic-cli创建项目
ionic start PROJECT-NAME
然后接入ng-zorro-antd-mobile,其中有两种方式:
ng add ng-zorro-antd-mobile
npm install ng-zorro-antd-mobile --save
然后在 app.modules.ts 中,全局引入 ng-zorro-antd-mobile:
import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';
imports: [
...
NgZorroAntdMobileModule
]
让我们看下ng-zorro-antd-mobile带来了哪些有用的组件,随便截几个图:
notice
step
picker
imagePicker
calendar
modal
actionSheet
好了,不一一截图了,有兴趣自行上官网上看吧。