• Steps步骤条
    • 规则
  • 代码演示
  • API
    • Steps
    • Steps.Step

    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-