Angular 4入门教程系列：16：NG-ZORRO：ICON/Button/Grid

最新推荐文章于 2024-06-20 09:31:36 发布

淼叔

最新推荐文章于 2024-06-20 09:31:36 发布

阅读量1.2w

点赞数

分类专栏： # 前端 # Angular快速入门文章标签： angular ng-zorro

本文链接：https://blog.csdn.net/liumiaocn/article/details/78572541

版权

这篇教程详细介绍了如何在Angular 4项目中使用NG-ZORRO库，包括nz-button的属性设定，ICON的使用方法，以及nz-row和nz-col进行网格布局的实践。

摘要由CSDN通过智能技术生成

NG-ZORRO使用起来非常方便，上手很快，这篇文章介绍一下如何使用NG-ZORRO的ICON/Button/Grid。

Button（nz-button）

属性设定如下，可以结合nz-button-group使用

属性	说明	类型	默认值
nzType	设置按钮类型，可选值为 primary dashed danger default	String	-
nzShape	设置按钮形状，可选值为 circle 或者不设	String	-
nzSize	设置按钮大小，可选值为 small large 或者不设	String	default
nzGhost	设置幽灵按钮	Boolean	false
nzLoading	设置按钮载入状态	Boolean	false

Icon

使用例如下：

<i class="anticon anticon-${type}"></i>

Grid(nz-row & nz-col)

[nz-row]

成员	说明	类型	默认值
nzGutter	栅格间隔	Number	0
nzType	布局模式，可选 flex，现代浏览器下有效	String
nzAlign	flex 布局下的垂直对齐方式：top middle bottom	String	top
nzJustify	flex 布局下的水平排列方式：start end center space-around space-between	String	start

[nz-col]

成员	说明	类型	默认值
nzSpan	栅格占位格数，为 0 时相当于 display: none	Number	-
nzOrder	栅格顺序，flex 布局模式下有效	Number	0
nzOffset	栅格左侧的间隔格数，间隔内不可以有栅格	Number	0
nzPush	栅格向右移动格数	Number	0
nzPull	栅格向左移动格数	Number	0
nzXs	<768px 响应式栅格，可为栅格数或一个包含其他属性的对象	Number\|Object	-
nzSm	≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象	Number\|Object	-
nzMd	≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象	Number\|Object	-
nzLg	≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象	Number\|Object	-
nzXl	≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象	Number\|Object	-

例子

事前准备

如何引入NG-ZORRO的Angular项目中，请参看：http://blog.csdn.net/liumiaocn/article/details/78526421

代码

CSS

[root@mail app]# cat app.component.css 
.nzrow-box-1 {
  background:#BFBFBF;
  color:#FFF;
  height:40px;
  font-size:30px;
  text-align:center;
}

.nzrow-box-2 {
  background:#CFCFCF;
  color:#FFF;
  height:40px;
  font-size:30px;
  text-align:center;
}
[root@mail app]#

HTML模板

[root@mail app]# cat app.component.html 
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {
   {
   title}}!
  </h1>
</