ng-ytl-zorro-antd/src/showcase/nz-demo-timeline/nz-demo-timeline.html

An enterprise-class UI components based on Ant Design and Angular

<article>

  <section class="markdown">
    <h1>Timeline时间轴</h1>
    <section class="markdown"><p>垂直展示的时间流信息。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <!-- <a class="anchor">#</a> -->
      </h2>
      <ul>
        <li>当有一系列信息需要从上至下按时间排列时；</li>
        <li>需要有一条时间轴进行视觉上的串联时；</li>
      </ul>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>

  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'基本用法'" id="components-timeline-demo-basic" [nzCode]="NzDemoTimelineBasicCode">
        <nz-demo-timeline-basic demo></nz-demo-timeline-basic>
        <div intro>
          <p>Timeline基础用法。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'圆圈颜色'" id="components-timeline-demo-color" [nzCode]="NzDemoTimelineColorCode">
        <nz-demo-timeline-color demo></nz-demo-timeline-color>
        <div intro>
          <p>圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'最后一个'" id="components-timeline-demo-pending" [nzCode]="NzDemoTimelinePendingCode">
        <nz-demo-timeline-pending demo></nz-demo-timeline-pending>
        <p intro>
          在最后位置添加一个幽灵节点，表示时间轴未完成，还在记录过程中。可以指定<code>ng-template</code> 和 <code>#pending</code>
        </p>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自定义时间轴点'" id="components-timeline-demo-custom" [nzCode]="NzDemoTimelineCustomCode">
        <nz-demo-timeline-custom demo></nz-demo-timeline-custom>
        <div intro>
          <p>可以通过<code> ng-template </code>和<code> #custom </code>设置自定义元素。</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="timeline.item"><span>nz-timeline-item</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzColor</td>
          <td>圈的颜色，固定为"green"，"red"，"blue"</td>
          <td>'green'|'red'|'blue'</td>
          <td>'blue'</td>
        </tr>
        <tr>
          <td>pending</td>
          <td>幽灵节点元素</td>
          <td>ng-template</td>
          <td></td>
        </tr>
        <tr>
          <td>custom</td>
          <td>自定义元素</td>
          <td>ng-template</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </section>
</article>