ng-ytl-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
282 lines (281 loc) • 11.8 kB
HTML
<article>
<section class="markdown">
<h1>Grid <span class="subtitle">栅格</span></h1>
<p>24 栅格系统。</p>
<h2 id="设计理念"><span>设计理念</span>
<!-- <a class="anchor">#</a> -->
</h2>
<div class="grid-demo">
<div class="ant-row demo-row">
<div class="ant-col-24 demo-col demo-col-1">
100%
</div>
</div>
<div class="ant-row demo-row">
<div class="ant-col-6 demo-col demo-col-2">
25%
</div>
<div class="ant-col-6 demo-col demo-col-3">
25%
</div>
<div class="ant-col-6 demo-col demo-col-2">
25%
</div>
<div class="ant-col-6 demo-col demo-col-3">
25%
</div>
</div>
<div class="ant-row demo-row">
<div class="ant-col-8 demo-col demo-col-4">
33.33%
</div>
<div class="ant-col-8 demo-col demo-col-5">
33.33%
</div>
<div class="ant-col-8 demo-col demo-col-4">
33.33%
</div>
</div>
<div class="ant-row demo-row">
<div class="ant-col-12 demo-col demo-col-1">
50%
</div>
<div class="ant-col-12 demo-col demo-col-3">
50%
</div>
</div>
<div class="ant-row demo-row">
<div class="ant-col-16 demo-col demo-col-4">
66.66%
</div>
<div class="ant-col-8 demo-col demo-col-5">
33.33%
</div>
</div>
</div>
<p>在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。</p>
<p>划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。</p>
<h2 id="概述"><span>概述</span>
<!-- <a class="anchor">#</a> -->
</h2>
<p>布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：</p>
<ul>
<li>
<p>通过<code>row</code>在水平方向建立一组<code>column</code>（简写col）
</p></li>
<li>
<p>你的内容应当放置于<code>col</code>内，并且，只有<code>col</code>可以作为<code>row</code>的直接元素
</p></li>
<li>
<p>栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用<code>.col-8</code>来创建
</p></li>
<li>
<p>如果一个<code>row</code>中的<code>col</code>总和超过 24，那么多余的<code>col</code>会作为一个整体另起一行排列
</p></li>
</ul>
<h2 id="Flex-布局"><span>Flex 布局</span>
<!-- <a class="anchor">#</a> -->
</h2>
<p>我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。</p>
<p>Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。</p></section>
<div nz-row [nzGutter]="8">
<div nz-col [nzSpan]="24">
<nz-code-box [nzTitle]="'基础布局'" id="components-grid-demo-basic" [nzCode]="NzDemoGridBasicCode">
<nz-demo-grid-basic demo></nz-demo-grid-basic>
<div intro>
<p>从堆叠到水平排列。</p>
<p>使用单一的一组 <code>nz-row</code> 和 <code>nz-col</code> 栅格组件，就可以创建一个基本的栅格系统，所有列（nz-col）必须放在
<code>nz-row</code> 内。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'区块间隔'" id="components-grid-demo-gutter" [nzCode]="NzDemoGridGutterCode">
<nz-demo-grid-gutter demo></nz-demo-grid-gutter>
<div intro>
<p>栅格常常需要和间隔进行配合，你可以使用 <code>nz-row</code> 的 <code>nzGutter</code> 属性，我们推荐使用 <code>(16+8n)px</code> 作为栅格间隔。
</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'左右偏移'" id="components-grid-demo-offset" [nzCode]="NzDemoGridOffsetCode">
<nz-demo-grid-offset demo></nz-demo-grid-offset>
<div intro>
<p>列偏移</p>
<p>使用 <code>nzOffset</code> 可以将列向右侧偏。例如，<code>[nzOffset]="'4'"</code> 将元素向右侧偏移了 4 个列（column）的宽度。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'布局排序'" id="components-grid-demo-sort" [nzCode]="NzDemoGridSortCode">
<nz-demo-grid-sort demo></nz-demo-grid-sort>
<div intro>
<p>列排序</p>
<p>使用 <code>nzPull</code> 和 <code>nzPush</code> 类就可以很容易的改变列（column）的顺序。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'Flex布局'" id="components-grid-demo-flex" [nzCode]="NzDemoGridFlexCode">
<nz-demo-grid-flex demo></nz-demo-grid-flex>
<div intro>
<p>Flex布局基础</p>
<p>使用 <code>[nzType]="'flex'"</code> 定义 <code>flex</code> 布局，其子元素根据 <code>[nzJustify]</code> 不同的值
<code>start</code>,<code>center</code>,<code>end</code>,<code>space-between</code>,<code>space-around</code>，分别定义其在父节点里面的排版方式。
</p></div>
</nz-code-box>
<nz-code-box [nzTitle]="'Flex对齐'" id="components-grid-demo-flex-align" [nzCode]="NzDemoGridFlexAlignCode">
<nz-demo-grid-flex-align demo></nz-demo-grid-flex-align>
<div intro>
<p>Flex 子元素垂直对齐。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'Flex排序'" id="components-grid-demo-flex-order" [nzCode]="NzDemoGridFlexOrderCode">
<nz-demo-grid-flex-order demo></nz-demo-grid-flex-order>
<div intro>
<p>通过 Flex 布局的 Order 来改变元素的排序。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'响应式布局'" id="components-grid-demo-responsive" [nzCode]="NzDemoGridResponsiveCode">
<nz-demo-grid-responsive demo></nz-demo-grid-responsive>
<div intro>
<p>参照 Bootstrap 的
<a href="http://getbootstrap.com/css/#grid-media-queries">响应式设计</a>
，预设四个响应尺寸：<code>xs</code> <code>sm</code> <code>md</code> <code>lg</code> <code>xl</code>。
</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'其他属性的响应式'" id="components-grid-demo-responsive-more" [nzCode]="NzDemoGridResponsiveMoreCode">
<nz-demo-grid-responsive-more demo></nz-demo-grid-responsive-more>
<div intro>
<p>
<code>span</code> <code>pull</code> <code>push</code> <code>offset</code> <code>order</code> 属性可以通过内嵌到 <code>nzXs</code> <code>nzSm</code> <code>nzMd</code> <code>nzLg</code> <code>nzXl</code> 属性中来使用。
</p>
<p>
其中 <code>[nzXs]="6"</code> 相当于 <code>nzXs={{'{'}}{{'{'}} span: 6 {{'}'}}{{'}'}}</code>
</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'栅格配置器'" id="components-grid-demo-gutter-config" [nzCode]="NzDemoGridGutterConfigCode">
<nz-demo-grid-gutter-config demo></nz-demo-grid-gutter-config>
<div intro>
<p>可以简单配置几种等分栅格和间距。</p>
</div>
</nz-code-box>
</div>
</div>
<section class="markdown api-container">
<h2 id="API"><span>API</span>
<!-- <a class="anchor">#</a> -->
</h2>
<h3 id="Row"><span>[nz-row]</span>
<!-- <a class="anchor">#</a> -->
</h3>
<table>
<thead>
<tr>
<th>成员</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>nzGutter</td>
<td>栅格间隔</td>
<td>Number</td>
<td>0</td>
</tr>
<tr>
<td>nzType</td>
<td>布局模式，可选 <code>flex</code>，现代浏览器下有效</td>
<td>String</td>
<td></td>
</tr>
<tr>
<td>nzAlign</td>
<td>flex 布局下的垂直对齐方式：<code>top</code> <code>middle</code> <code>bottom</code></td>
<td>String</td>
<td><code>top</code></td>
</tr>
<tr>
<td>nzJustify</td>
<td>flex 布局下的水平排列方式：<code>start</code> <code>end</code> <code>center</code> <code>space-around</code>
<code>space-between</code>
</td>
<td>String</td>
<td><code>start</code></td>
</tr>
</tbody>
</table>
<h3 id="Col"><span>[nz-col]</span>
<!-- <a class="anchor">#</a> -->
</h3>
<table>
<thead>
<tr>
<th>成员</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>nzSpan</td>
<td>栅格占位格数，为 0 时相当于 <code>display: none</code></td>
<td>Number</td>
<td>-</td>
</tr>
<tr>
<td>nzOrder</td>
<td>栅格顺序，<code>flex</code> 布局模式下有效</td>
<td>Number</td>
<td>0</td>
</tr>
<tr>
<td>nzOffset</td>
<td>栅格左侧的间隔格数，间隔内不可以有栅格</td>
<td>Number</td>
<td>0</td>
</tr>
<tr>
<td>nzPush</td>
<td>栅格向右移动格数</td>
<td>Number</td>
<td>0</td>
</tr>
<tr>
<td>nzPull</td>
<td>栅格向左移动格数</td>
<td>Number</td>
<td>0</td>
</tr>
<tr>
<td>nzXs</td>
<td><code><768px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
<td>Number|Object</td>
<td>-</td>
</tr>
<tr>
<td>nzSm</td>
<td><code>≥768px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
<td>Number|Object</td>
<td>-</td>
</tr>
<tr>
<td>nzMd</td>
<td><code>≥992px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
<td>Number|Object</td>
<td>-</td>
</tr>
<tr>
<td>nzLg</td>
<td><code>≥1200px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
<td>Number|Object</td>
<td>-</td>
</tr>
<tr>
<td>nzXl</td>
<td><code>≥1600px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
<td>Number|Object</td>
<td>-</td>
</tr>
</tbody>
</table>
</section>
</article>