网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

Angular中ng-zorro-antd怎么用

这篇文章主要介绍了Angular中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


  

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

二、最佳实践

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

1、命名

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

  • 所有组件、指令都是以 nz- 开头(例:ng-button)。

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

2、栅格

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


  
  

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

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

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

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


  
  

3、样式

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

比如:


  col-12
  col-12

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 代码片断,对开发效率很有帮助。

Angular中ng-zorro-antd怎么用

感谢你能够认真阅读完这篇文章,希望小编分享的“Angular中ng-zorro-antd怎么用”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


分享题目:Angular中ng-zorro-antd怎么用
标题链接:http://bjjierui.cn/article/gipgoh.html

其他资讯