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

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 

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  h1>
div>
<h2>Buttonsh2>
<button nz-button [nzType]="'primary'">primarybutton>
<button nz-button [nzType]="'dashed'">dashedbutton>
<button nz-button [nzType]="'default'">defaultbutton>
<button nz-button [nzType]="'danger'">dangerbutton>
<button nz-button [nzShape]="'default'">defaultShapebutton>
<button nz-button [nzShape]="'circle'">Obutton>
<button nz-button [nzSize]="'large'">Lbutton>
<button nz-button [nzSize]="'default'">Mbutton>
<button nz-button [nzSize]="'small'">Sbutton>
<button nz-button [nzGhost]="true">Lbutton>
<button nz-button [nzLoading]="true">Lbutton>

<h1>nz-row:nz-colh1>
<div nz-row>
  <div nz-col [nzSpan]="24"><div class="nzrow-box-1">100%div>div>
div>
<hr>
<div nz-row>
  <div nz-col [nzSpan]="6"><div class="nzrow-box-1">25%div>div>
  <div nz-col [nzSpan]="6"><div class="nzrow-box-2">25%div>div>
  <div nz-col [nzSpan]="6"><div class="nzrow-box-1">25%div>div>
  <div nz-col [nzSpan]="6"><div class="nzrow-box-2">25%div>div>
div>
<hr>
<div nz-row>
  <div nz-col [nzSpan]="8"><div class="nzrow-box-1">33%div>div>
  <div nz-col [nzSpan]="8"><div class="nzrow-box-2">33%div>div>
  <div nz-col [nzSpan]="8"><div class="nzrow-box-1">33%div>div>
div>
<hr>
<hr>
<div nz-row>
  <div nz-col [nzSpan]="12"><div class="nzrow-box-1">50%div>div>
  <div nz-col [nzSpan]="12"><div class="nzrow-box-2">50%div>div>
div>
<hr>
<div nz-row>
  <div nz-col [nzSpan]="16"><div class="nzrow-box-1">66%div>div>
  <div nz-col [nzSpan]="8"><div class="nzrow-box-2">33%div>div>
div>
<hr>

<h1>nz-row:nz-col: nzGutter :16+8nh1>
<div nz-row [nzGutter]="48">
  <div nz-col [nzSpan]="6"><div class="nzrow-box-1">25%div>div>
  <div nz-col [nzSpan]="6"><div class="nzrow-box-2">25%div>div>
  <div nz-col [nzSpan]="6"><div class="nzrow-box-1">25%div>div>
  <div nz-col [nzSpan]="6"><div class="nzrow-box-2">25%div>div>
div>
<hr>
<div nz-row [nzGutter]="40">
  <div nz-col [nzSpan]="8"><div class="nzrow-box-1">33%div>div>
  <div nz-col [nzSpan]="8"><div class="nzrow-box-2">33%div>div>
  <div nz-col [nzSpan]="8"><div class="nzrow-box-1">33%div>div>
div>
<hr>
<hr>
<div nz-row [nzGutter]="32">
  <div nz-col [nzSpan]="12"><div class="nzrow-box-1">50%div>div>
  <div nz-col [nzSpan]="12"><div class="nzrow-box-2">50%div>div>
div>
<hr>
<div nz-row [nzGutter]="32">
  <div nz-col [nzSpan]="16"><div class="nzrow-box-1">66%div>div>
  <div nz-col [nzSpan]="8"><div class="nzrow-box-2">33%div>div>
div>
<hr>

<h1>iconh1>
<div nz-row>
  <div nz-col [nzSpan]="6"><div class="nzrow-box-1"><i class="anticon anticon-step-backward">i>div>div>
  <div nz-col [nzSpan]="6"><div class="nzrow-box-2"><i class="anticon anticon-step-forward">i>div>div>
  <div nz-col [nzSpan]="6"><div class="nzrow-box-1"><i class="anticon anticon-fast-backward">i>div>div>
  <div nz-col [nzSpan]="6"><div class="nzrow-box-2"><i class="anticon anticon-fast-forward">i>div>div>
div>
<hr>
[root@mail app]# 

结果确认