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
对Angular应该会有一个非常大的推动。
当前组件与React组件还有几个比较重要的组件未完成,比如:autocomplate
、Cascader
一些很常用的组件。希望有更多大牛加入贡献行列,让 ng-zorro-antd
社区环境更丰富。
Happy Coding!