前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >有了ng-zorro-mobile,ionic4如虎添翼

有了ng-zorro-mobile,ionic4如虎添翼

作者头像
IT晴天
发布2018-10-15 12:59:30
2.6K0
发布2018-10-15 12:59:30
举报
文章被收录于专栏:ionic3+ionic3+

前端一般会听过阿里的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相关经验对下面几行代码非常熟悉:

代码语言:javascript
复制
#全局安装ionic-cli
npm install -g ionic
#使用ionic-cli创建项目
ionic start PROJECT-NAME

然后接入ng-zorro-antd-mobile,其中有两种方式:

  1. 使用angular-cli只需要以下一句命令即可完成模块初始化配置(前提安装了angular-cli):
代码语言:javascript
复制
ng add ng-zorro-antd-mobile
  1. 使用npm,则先安装模块:
代码语言:javascript
复制
npm install ng-zorro-antd-mobile --save

然后在 app.modules.ts 中,全局引入 ng-zorro-antd-mobile:

代码语言:javascript
复制
import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';
imports: [
    ...
    NgZorroAntdMobileModule
  ]

让我们看下ng-zorro-antd-mobile带来了哪些有用的组件,随便截几个图:

notice

step

picker

imagePicker

calendar

modal

actionSheet

好了,不一一截图了,有兴趣自行上官网上看吧。

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

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

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

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

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