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

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

<article>
  <section class="markdown"><h1>Steps 步骤条</h1>
    <section class="markdown"><p>引导用户按照流程完成任务的导航条。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <!-- <a class="anchor">#</a> -->
      </h2>
      <ul>
        <li><p>当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。</p></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>
      <nz-code-box [nzTitle]="'简单'" [nzCode]="NzDemoStepsBasicCode">
        <nz-demo-steps-basic demo></nz-demo-steps-basic>
        <div intro>
          <p>简单的步骤条</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col>
      <nz-code-box [nzTitle]="'迷你版'" [nzCode]="NzDemoStepsMiniCode">
        <nz-demo-steps-mini demo></nz-demo-steps-mini>
        <div intro>
          <p>迷你版的步骤条，通过设置 <code>size="small"</code> 启用.</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col>
      <nz-code-box [nzTitle]="'带图标的步骤条'" [nzCode]="NzDemoStepsIconCode">
        <nz-demo-steps-icon demo></nz-demo-steps-icon>
        <div intro>
          <p>通过设置 <code>nz-step</code> 的 <code>icon</code> 属性，可以启用自定义图标。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col>
      <nz-code-box [nzTitle]="'步骤切换'" [nzCode]="NzDemoStepsChangeCode">
        <nz-demo-steps-change demo></nz-demo-steps-change>
        <div intro>
          <p>通常配合内容及按钮使用，表示一个流程的处理进度。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col>
      <nz-code-box [nzTitle]="'竖直方向的步骤条'" [nzCode]="NzDemoStepsVerticalCode">
        <nz-demo-steps-vertical demo></nz-demo-steps-vertical>
        <div intro>
          <p>简单的竖直方向的步骤条。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col>
      <nz-code-box [nzTitle]="'竖直方向的小型步骤条'" [nzCode]="NzDemoStepsVerticalMiniCode">
        <nz-demo-steps-vertical-mini demo></nz-demo-steps-vertical-mini>
        <div intro>
          <p>简单的竖直方向的小型步骤条。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col>
      <nz-code-box [nzTitle]="'步骤运行错误'" [nzCode]="NzDemoStepsErrorCode">
        <nz-demo-steps-error demo></nz-demo-steps-error>
        <div intro>
          <p>使用<code>Steps</code>的<code>status</code>属性来指定当前步骤的状态。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col>
      <nz-code-box [nzTitle]="'点状步骤条'" [nzCode]="NzDemoStepsDottedCode">
        <nz-demo-steps-dotted demo></nz-demo-steps-dotted>
        <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="Steps"><span>nz-steps</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzCurrent</td>
          <td>指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过<code> nzStatus </code>属性覆盖状态</td>
          <td>Number</td>
          <td>0</td>
        </tr>
        <tr>
          <td>nzStatus</td>
          <td>指定当前步骤的状态，可选<code>wait</code> <code>process</code> <code>finish</code> <code>error</code></td>
          <td>String</td>
          <td>process</td>
        </tr>
        <tr>
          <td>nzSize</td>
          <td>指定大小，目前支持普通（<code>default</code>）和迷你（<code>small</code>）</td>
          <td>String</td>
          <td>default</td>
        </tr>
        <tr>
          <td>nzDirection</td>
          <td>指定步骤条方向。目前支持水平（<code>horizontal</code>）和竖直（<code>vertical</code>）两种方向</td>
          <td>String</td>
          <td>horizontal</td>
        </tr>
        <tr>
          <td>nzProgressDot</td>
          <td>通过添加该属性使用点状步骤条</td>
          <td>Boolean</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>

    <h3 id="Step"><span>nz-step</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzStatus</td>
          <td>指定状态。当不配置该属性时，会使用 <code>Steps</code> 的 <code>current</code> 来自动指定状态。可选：<code>wait</code>
            <code>process</code> <code>finish</code> <code>error</code></td>
          <td>String</td>
          <td>wait</td>
        </tr>
        <tr>
          <td>nzTitle</td>
          <td>标题</td>
          <td>String</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzDescription</td>
          <td>步骤的详情描述，可选。如果需传入TemplateRef，可使用<code>template</code>，具体见实例</td>
          <td>String or TemplateRef</td>
          <td>-</td>
        </tr>
        <tr>
          <td>#nzIcon</td>
          <td>步骤图标的类型，可选</td>
          <td>ng-template</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>