Steps步骤条

显示一个任务的进度；或者引导用户完成某个复杂任务。

规则

  • 应用在离散和时间较长的进度显示，eg：转账进度；如果任务是连续和短暂的，应该使用 Progress 来显示，eg：打开页面。
  • 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务，eg：用户注册新账号。

代码演示

基本用法

最简单的用法。

  1. import { Component, OnInit } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-steps-basic',
  5.   template: `
  6.     <div class="am-demo-page">
  7.       <div style="padding: 15px;font-size: 16px;">步骤条</div>
  8.       <div class="am-demo-bd am-wingblank am-wingblank-lg">
  9.         <div>
  10.           <div class="sub-title">Small size</div>
  11.         </div>
  12.         <div>
  13.           <Steps [size]="'small'" [current]="1">
  14.             <Step [title]="'Finished'" [description]="'This is description'"></Step>
  15.             <Step [title]="'In Progress'" [description]="'This is description'"></Step>
  16.             <Step [title]="'Waiting'" [description]="'This is description'"></Step>
  17.           </Steps>
  18.         </div>
  19.         <div>
  20.           <div class="sub-title">Small size, single line text</div>
  21.         </div>
  22.         <div>
  23.           <Steps [size]="'small'" [current]="1">
  24.             <Step [title]="'Finished'"></Step>
  25.             <Step [title]="'In Progress'"></Step>
  26.             <Step [title]="'Waiting'"></Step>
  27.           </Steps>
  28.         </div>
  29.         <div>
  30.           <div class="sub-title">Default size</div>
  31.         </div>
  32.         <div>
  33.           <Steps>
  34.             <Step [status]="'process'" [title]="'Finished'" [description]="'This is description'"></Step>
  35.             <Step [status]="'error'" [title]="'Error'" [description]="'This is description'"></Step>
  36.             <Step [title]="'Waiting'" [description]="'This is description'"></Step>
  37.           </Steps>
  38.         </div>
  39.         <div>
  40.           <div class="sub-title">Customized status</div>
  41.         </div>
  42.         <div>
  43.           <Steps>
  44.             <Step [status]="'finish'" [title]="'Step 1'" [icon]="customIcon"></Step>
  45.             <Step [status]="'process'" [title]="'Step 2'" [icon]="customIcon"></Step>
  46.             <Step [status]="'error'" [title]="'Step 3'" [icon]="customIcon"></Step>
  47.           </Steps>
  48.         </div>
  49.         <div>
  50.           <div class="sub-title">Customized icon</div>
  51.         </div>
  52.         <div>
  53.           <Steps [current]="1">
  54.             <Step [title]="'Step 1'" [icon]="customIcon" [description]="'This is description'"></Step>
  55.             <Step [title]="'Step 2'" [icon]="customIcon" [description]="'This is description'"></Step>
  56.             <Step [title]="'Step 3'" [icon]="customIcon" [description]="'This is description'"></Step>
  57.           </Steps>
  58.         </div>
  59.         <div>
  60.           <div class="sub-title">Multiple Steps</div>
  61.         </div>
  62.         <div>
  63.           <Steps [current]="1">
  64.             <Step [title]="'Step 1'" [icon]="customIcon"></Step>
  65.             <Step [title]="'Step 2'" [icon]="customIcon"></Step>
  66.             <Step [title]="'Step 3'" [icon]="customIcon" [status]="'error'"></Step>
  67.             <Step [title]="'Step 4'" [icon]="customIcon"></Step>
  68.           </Steps>
  69.         </div>
  70.       </div>
  71.       <div style="padding: 15px;font-size: 16px;">水平方向的步骤条</div>
  72.       <div class="am-demo-bd am-wingblank am-wingblank-lg">
  73.         <div>
  74.           <div class="sub-title">Horizontal small size</div>
  75.         </div>
  76.         <div>
  77.           <Steps [size]="'small'" [current]="1" [direction]="'horizontal'">
  78.             <Step *ngFor="let v of steps" [title]="v.title" [description]="v.description"></Step>
  79.           </Steps>
  80.         </div>
  81.         <div>
  82.           <div class="sub-title">Horizontal default size</div>
  83.         </div>
  84.         <div>
  85.           <Steps [current]="1" [direction]="'horizontal'">
  86.             <Step *ngFor="let v of steps" [title]="v.title" [description]="v.description"></Step>
  87.           </Steps>
  88.         </div>
  89.         <div>
  90.           <div class="sub-title">Horizontal customized icon</div>
  91.         </div>
  92.         <div>
  93.           <Steps [direction]="'horizontal'">
  94.             <Step [title]="'Step 1'" [icon]="customIcon"></Step>
  95.             <Step [title]="'Step 2'" [status]="'error'" [icon]="customIcon"></Step>
  96.             <Step [title]="'Step 3'" [icon]="customIcon"></Step>
  97.           </Steps>
  98.         </div>
  99.       </div>
  100.     </div>
  102.     <ng-template #customIcon>
  103.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" class="am-icon am-icon-md">
  104.         <g fillRule="evenodd" stroke="transparent" strokeWidth="4">
  105.           <path d="M21 0C9.402 0 0 9.402 0 21c0 11.6 9.402 21 21 21s21-9.4 21-21C42 9.402 32.598 0 21 0z" />
  106.           <path fill="#FFF" d="M29 18.73c0-.55-.447-1-1-1H23.36l4.428-5.05c.407-.46.407-1.208 0-1.668-.407-.46-1.068-.46-1.476 0l-5.21 5.89-5.21-5.89c-.406-.46-1.067-.46-1.475 0-.406.46-.406 1.207 0 1.667l4.43 5.05H14.23c-.55 0-.998.45-.998 1 0 .554.448.97 1 .97h5.9v3.942h-5.9c-.552 0-1 .448-1 1s.448.985 1 .985h5.9v4.896c0 .552.448 1 1 1 .55 0 .968-.284.968-.836v-5.06H28c.553 0 1-.433 1-.985s-.447-1-1-1h-5.9v-3.94H28c.553 0 1-.418 1-.97z" />
  107.         </g>
  108.       </svg>
  109.     </ng-template>
  110.   `,
  111.   styles: [
  112.     `
  113.       .sub-title {
  114.         color: #888;
  115.         font-size: 14px;
  116.         padding: 30px 0 18px 0;
  117.       }
  118.       .am-wingblank,
  119.       .am-wingblank-lg {
  120.         margin-left: 15px;
  121.         margin-right: 15px;
  122.       }
  124.       .am-button {
  125.         display: block;
  126.         outline: 0 none;
  127.         -webkit-appearance: none;
  128.         -webkit-box-sizing: border-box;
  129.         box-sizing: border-box;
  130.         padding: 0;
  131.         text-align: center;
  132.         font-size: 18px;
  133.         height: 47px;
  134.         line-height: 47px;
  135.         overflow: hidden;
  136.         text-overflow: ellipsis;
  137.         word-break: break-word;
  138.         white-space: nowrap;
  139.         color: #000;
  140.         background-color: #fff;
  141.         border: 1px solid #ddd;
  142.         border-radius: 5px;
  143.         margin: 0 15px 15px 15px;
  144.       }
  145.     `
  146.   ]
  147. })
  148. export class DemoStepsBasicComponent implements OnInit {
  149.   steps = [];
  151.   constructor() {}
  153.   ngOnInit() {
  154.     this.steps = [
  155.       {
  156.         title: 'Finished',
  157.         description: 'This is description'
  158.       },
  159.       {
  160.         title: 'In Progress',
  161.         description: 'This is description'
  162.       },
  163.       {
  164.         title: 'Waiting',
  165.         description: 'This is description'
  166.       }
  167.     ];
  168.   }
  169. }

Steps 步骤条 - 图1

API

  1. <Steps>
  2.   <Step title="第一步" />
  3.   <Step title="第二步" />
  4.   <Step title="第三步" />
  5. </Steps>

Steps

整体步骤条。

属性说明类型默认值
current指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态number0
size尺寸，支持设置小尺寸smallstring-
status指定当前步骤的状态，可选 waitprocessfinisherrorstringprocess
directionstep 样式Enum { 'vertical', 'horizontal' }vertical

Steps.Step

步骤条内的每一个步骤。

属性说明类型默认值
status指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。Enum { 'wait', 'process', 'finish', 'error' }wait
title标题string-
description步骤的详情描述，可选string-
icon步骤图标，可选TemplateRef-