ng-zorro-antd 入门初体验


Posted in Javascript onDecember 03, 2018

Angular版本的 Ant Design 总算发布了,其名曰:ng-zorro-antd。

这人要是越期待,心就越着急。早在8月上旬我就开发好了 ng-zorro-vscode;一个在vscode下的snippets。因此,虽然那时未能探到源代码,但从官网的SDK中,就已经对 ng-zorro-antd 有一定全面性了解。

下面将基于我的理解,从宏观角度解析一下,或许能帮助你更好的去使用 ng-zorro-antd。

再次说一下,ng-zorro-antd 真的是非常有良心的作品。

一、安装

ng-zorro-antd 本身只是一个antd组件Angular实现的合集,因此,如果你希望基于 ng-zorro-antd 开发依然需要先安装 Angular Cli。

1、创建项目

# 安装全局,这样允许直接在CMD命令行中使用 `ng` 命令。
npm install -g @angular/cli@latest

# 创建项目
ng new demo

# 安装包
npm install --save ng-zorro-antd

2、导入模块

我建议在 SharedModuel 中导入模块。

@NgModule({
  imports: [
    NgZorroAntdModule.forRoot()
  ],
  exports: [
    NgZorroAntdModule
  ]
});

3、根组件

务必要引入 nz-root 根组件;有且只需引用一次。部分组件需要依赖 nz-root 所以最佳位置放在根组件内,比如 ./src/app.component.html

<nz-root>
  <router-outlet></router-outlet>
</nz-root>

至此,你可以放心在任何页面中使用 ng-zorro-antd 组件。

二、最佳实践

已经实现了绝大多数的 React 版本的组件;虽然今天刚发布,但是已经在阿里内部已经在使用了。

1、命名

ng-zorro-antd 在命名方面还是很讲究的,而且有几个特点:

  • 所有组件、指令都是以 nz- 开头(例:ng-button)。
  • 所有组件、指令属性都是 nz 开头,紧跟大驼峰式命名法(例:[nzSize])。

2、栅格

antd 是以 24 等分的栅格来划分区域,这一点可能跟经常使用 bootstrap 的人会有一点不习惯。

<div nz-row>
  <div nz-col [nzSpan]="12"></div>
  <div nz-col [nzSpan]="12"></div>
</div>

一个 nz-row 内的 nz-col 总格数([nzSpan] 总和)为24表示一行,如果超过会自动换行。

当然,也支持类似 bootstrap 的响应式设计,内置了几种不同的响应。

Size  ng-zorro-antd bootstrap
auto  [nzXs] .col-xs-
540px  [nzSm] .col-sm-
720px  [nzMd] .col-md-
960px  [nzLg] .col-lg-
1140px  [nzXl] .col-xl-

如果你喜欢 flex 布局,需要手动开启:

<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'top'">
  <div nz-col [nzSpan]="12"></div>
  <div nz-col [nzSpan]="12"></div>
</div>

3、样式

无须再额外的引用外部任何 antd 的样式,因为 ng-zorro-antd 是以 encapsulation: ViewEncapsulation.None 不隔离的方式封装样式,可以直接在任何地方运用到这些样式。

比如:

<div class="ant-row">
  <div class="ant-col-12">col-12</div>
  <div class="ant-col-12">col-12</div>
</div>

4、时间处理

Angular 默认的时间处理简直就是一个痛,而 ng-zorro-antd 依赖了 moment,因此在处理时间格式上,正确的姿势应该是:

_value | nzDate: 'YYYY-MM-DD ddd'
Outpu: 2017-08-15 周二

5、货币

也是Angular痛点,ng-zorro-antd 并无提供相应Pipe,应该后续会有!

三、工欲善其事,必先利其器

如果你在 vscode 中编写Angular,那么安装 ng-zorro-vscode 代码片断,对开发效率很有帮助。

ng-zorro-antd 入门初体验

四、结论

ng-zorro-antd 对Angular应该会有一个非常大的推动。

当前组件与React组件还有几个比较重要的组件未完成,比如:autocomplate、Cascader 一些很常用的组件。希望有更多大牛加入贡献行列,让 ng-zorro-antd 社区环境更丰富。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
js实现页面图片消除效果
Mar 24 Javascript
如何使用 vue + d3 画一棵树
Dec 03 #Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 #Javascript
浅谈ng-zorro使用心得
Dec 03 #Javascript
JS跨域请求的问题解析
Dec 03 #Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 #Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 #Javascript
小程序实现授权登陆的解决方案
Dec 02 #Javascript
You might like
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
js实现直播点击飘心效果
2020/08/19 Javascript
详解python持久化文件读写
2019/04/06 Python
简单了解python中对象的取反运算符
2019/07/01 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Python基于template实现字符串替换
2020/11/27 Python
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
社团活动策划书范文
2014/01/09 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
一般党员对照检查材料
2014/09/24 职场文书
2014年实验室工作总结
2014/12/03 职场文书
公务员政审个人总结
2015/02/12 职场文书
首次购房证明
2015/06/19 职场文书
python实现自动化群控的步骤
2021/04/11 Python
Redis如何一键部署脚本
2021/04/12 Redis
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
对Keras自带Loss Function的深入研究
2021/05/25 Python
Python面向对象编程之类的概念
2021/11/01 Python