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]# 结果确认
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！