时间戳

首页 > 解决方案 > 垫子步进完成图标不在圆圈内

angular - 垫子步进完成图标不在圆圈内

问题描述

您好，我在角度中使用垫子步进器时遇到了麻烦..

<div class="container text-center mt-5" >
  <p>E-SNEAKERS</p>
  <mat-horizontal-stepper #stepper>

    <mat-step label="Step 1">
      Step 1 content
    </mat-step>

    <mat-step label="Step 2">
      Step 2 content
    </mat-step>

    <mat-step label="Step 3">
      You are now done.
    </mat-step>

  </mat-horizontal-stepper>
</div>

完成步骤图标超出圆圈.. 组件不包含任何 css..

图片

标签： angularmatstepper

解决方案

检查此代码是否有效：

   <mat-step label="Step 1">
      <div style="padding-top: 3%;">
          Step 1 content
      </div>
    </mat-step>

    <mat-step label="Step 2">
      <div style="padding-top: 3%;">
          Step 2 content
      </div>
    </mat-step>

    <mat-step label="Step 3">
      <div style="padding-top: 3%;">
          You are now done.
      </div>
    </mat-step>

在设计/模板时，您需要采取以下措施：

注 1：在转换基于 Mat 的样式时 - 始终在本地/组件级别的 scss 中更改，

注意 2：如果要在全局级别进行转换，请使用ng-deep。更多信息将在：https ://angular.io/guide/component-styles

推荐阅读