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 相关文章推荐
IFrame跨域高度自适应实现代码
Aug 16 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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中余数、取余的妙用
2015/06/29 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
纯javascript实现分页(两种方法)
2015/08/26 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
初学python数组的处理代码
2011/01/04 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python dumps和loads区别详解
2020/02/04 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
幼儿园课题方案
2014/06/09 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
聘任书的格式及模板
2019/10/28 职场文书