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 社区环境更丰富。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
ng-zorro-antd
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。