前端一般會聽過阿里的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 --type=angular
注意:要有
--type=angular
后綴,才是創建ionic4項目,不然是創建ionic3項目,ng-zorro-mobile是支持ionic4,而暫不兼容ionic3的,所以官方文檔寫錯了。
然后接入ng-zorro-antd-mobile,其中有兩種方式:
- 使用angular-cli,只需要以下一句命令即可完成模塊初始化配置(前提安裝了angular-cli):
ng add ng-zorro-antd-mobile
但這方式有個坑,它自動把app.component.html的內容強制替換為ng-zorro-antd-mobile的示例內容,所以執行完命令后要把app.component.html還原。
- 使用npm,則先安裝模塊,然后在 app.modules.ts 中,全局引入 ng-zorro-antd-mobile:
npm install ng-zorro-antd-mobile --save
import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';
imports: [
...
NgZorroAntdMobileModule
]
讓我們看下ng-zorro-antd-mobile帶來了哪些有用的組件,隨便截幾個圖:
notice
step
picker
imagePicker
calendar
modal
actionSheet
好了,不一一截圖了,有興趣自行上官網上看吧。