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]="'loading'"></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]="customTitle" [icon]="customIcon" [description]="customDescription"></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 #customTitle>
  103.       <div>Step 3</div>
  104.     </ng-template>
  106.     <ng-template #customDescription>
  107.       <div>'This is description'</div>
  108.     </ng-template>
  110.     <ng-template #customIcon>
  111.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" class="am-icon am-icon-md">
  112.         <g fillRule="evenodd" stroke="transparent" strokeWidth="4">
  113.           <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" />
  114.           <path
  115.             fill="#FFF"
  116.             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"
  117.           />
  118.         </g>
  119.       </svg>
  120.     </ng-template>
  121.   `,
  122.   styles: [
  123.     `
  124.       .sub-title {
  125.         color: #888;
  126.         font-size: 14px;
  127.         padding: 30px 0 18px 0;
  128.       }
  129.       .am-wingblank,
  130.       .am-wingblank-lg {
  131.         margin-left: 15px;
  132.         margin-right: 15px;
  133.       }
  135.       .am-button {
  136.         display: block;
  137.         outline: 0 none;
  138.         -webkit-appearance: none;
  139.         -webkit-box-sizing: border-box;
  140.         box-sizing: border-box;
  141.         padding: 0;
  142.         text-align: center;
  143.         font-size: 18px;
  144.         height: 47px;
  145.         line-height: 47px;
  146.         overflow: hidden;
  147.         text-overflow: ellipsis;
  148.         word-break: break-word;
  149.         white-space: nowrap;
  150.         color: #000;
  151.         background-color: #fff;
  152.         border: 1px solid #ddd;
  153.         border-radius: 5px;
  154.         margin: 0 15px 15px 15px;
  155.       }
  156.     `
  157.   ]
  158. })
  159. export class DemoStepsBasicComponent implements OnInit {
  160.   steps = [];
  162.   constructor() {}
  164.   ngOnInit() {
  165.     this.steps = [
  166.       {
  167.         title: 'Finished',
  168.         description: 'This is description'
  169.       },
  170.       {
  171.         title: 'In Progress',
  172.         description: 'This is description'
  173.       },
  174.       {
  175.         title: 'Waiting',
  176.         description: 'This is description'
  177.       }
  178.     ];
  179.   }
  180. }

Steps步骤条 - 图1

API

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

Steps

整体步骤条。

参数说明类型默认值
[current]指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态number0
[size]尺寸large | ‘small’-
[status]指定当前步骤的状态‘wait’ | ‘process’ | ‘finish’ | ‘error’‘process’
[direction]step的方向‘vertical’ | ‘horizontal’‘vertical’

Step

步骤条内的每一个步骤。

参数说明类型默认值
[status]指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态‘wait’ | ‘process’ | ‘finish’ | ‘error’wait
[title]标题string | TemplateRef-
[description]步骤的详情描述string | TemplateRef-
[icon]步骤图标string | TemplateRef-