欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ng-zorro-antd 入门初体验

程序员文章站 2023-08-21 14:52:19
angular版本的 ant design 总算发布了,其名曰:ng-zorro-antd。 这人要是越期待,心就越着急。早在8月上旬我就开发好了 ng-zorro-vs...

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 社区环境更丰富。

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