角材料步进标题线样式答案

【问题标题】：Angular material stepper header lines styling角材料步进标题线样式
【发布时间】：2018-11-16 20:24:57
【问题描述】：

我正在尝试为这些步骤实现此设计，但到目前为止还没有成功，我得到的最接近的方法是为当前活动步骤旁边的行提供颜色：

.mat-horizontal-stepper-header {
padding: 0 8px 0 16px !important;
&[ng-reflect-active="true"]+.mat-stepper-horizontal-line {
    border-top-color: rgba(37, 82, 245, 0.54) !important;
}

}

但目的是为活动步骤的前一行着色，如图所示。

对此有什么想法吗？这是用于复制的堆栈闪电战https://stackblitz.com/edit/angular-ngcsei

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在生产环境中，那些反映活动的属性不存在，所以我想出了这个基于元素索引的解决方案。我只是给 mat-horizontal-stepper 元素一个类，其中包含活动步骤的索引：last-edited-step-0、last-edited-step-1、last-edited-step-2。然后我创建了这个 mixins：

@mixin styleStepLine($index) {
    .mat-horizontal-stepper-header {
        &+.mat-stepper-horizontal-line:nth-child(#{$index}) {
            height: 2px;
            background-image: linear-gradient(to right, #00b495, #00aeea);
        }
    }
}

@mixin styleEditedStepIcon($index) {
    .mat-horizontal-stepper-header:nth-child(#{$index}) {
        .mat-step-icon:not(.mat-step-icon-selected) {
            background-color: map-get($colors, 'light-green');
        }
    }
}

@mixin styleUnEditedStepIcon($index) {
    .mat-horizontal-stepper-header:nth-child(#{$index}) {
        .mat-step-icon:not(.mat-step-icon-selected) {
            background-color: #e8e8e8;
        }
    }
}

.last-edited-step-1 {
    @include styleStepLine(2);
    @include styleEditedStepIcon(1);
    @include styleUnEditedStepIcon(3);
}

.last-edited-step-2 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleEditedStepIcon(1);
    @include styleEditedStepIcon(3);
}

【讨论】：

你能分享一个演示吗？无法实现你所做的
我也对实施此解决方案的一些帮助非常感兴趣？

【解决方案2】：

我迟到了这个帖子，认为这可能对某人有帮助。我有相同的要求，除了我尝试了每个建议的解决方案的图标颜色，但没有按预期工作。我尝试了以下解决方案，对我来说效果很好-

DEMO

@mixin styleStepLine($index) {
	.mat-horizontal-stepper-header {
		&+.mat-stepper-horizontal-line:nth-child(#{$index}) {
			height: 2px;
			background-image: linear-gradient(to right, #00b495, #00aeea);
		}
	}
}

@mixin styleEditedStepIcon($index) {
	.mat-horizontal-stepper-header:nth-child(#{$index}) {
		.mat-step-icon:not(.mat-step-icon-selected) {
			background-color: red;
		}
	}
}

@mixin styleUnEditedStepIcon($index) {
	.mat-horizontal-stepper-header:nth-child(#{$index}) {
		.mat-step-icon:not(.mat-step-icon-selected) {
			background-color: #e8e8e8;
		}
	}
}

.last-edited-step-1 {
	@include styleStepLine(2);
}

.last-edited-step-2 {
	@include styleStepLine(2);
	@include styleStepLine(4);
}

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,
.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,
[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after,
[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before {
	width: 0!important;
}

.mat-step-header .mat-step-header-ripple {
	display: none;
}

.mat-step-header.cdk-keyboard-focused,
.mat-step-header.cdk-program-focused,
.mat-step-header:hover {
	background-color: #fff;
}

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
	padding: 8px 0 8px 0 !important;
	width: 35px !important;
}

.mat-stepper-label-position-bottom .mat-stepper-horizontal-line {
	top: 20px !important;
}

<mat-horizontal-stepper linear #stepper ngClass="{{ 'last-edited-step-' + stepper.selectedIndex }}" labelPosition="bottom">
  <mat-step [stepControl]="firstFormGroup" errorMessage="Name is required.">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>h1</ng-template>
      <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
        <mat-form-field appearance="outline">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-hint>Hint</mat-hint>
  </mat-form-field>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" errorMessage="Address is required.">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>h2</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

【讨论】：

【解决方案3】：

这是我的解决方案，灵感来自 @dazzed 提出的解决方案。

在 HTML 中，我为 mat-horizontal-stepper 的 'last-edited-step-'last-edited-step-' + stepper.selectedIndex 提供了一个类。

在 CSS 方面，我使用 SASS for 循环动态生成类，因此循环 ($i) 从 .last-edited-step-last-edited-step-1 到 .last-edited-step-last-edited-step-42（例如 42，这意味着步骤数，当然）。然后在它们每个内部，我在第一行和第 n 行之间再次循环（$j），然后分配属性（在我的例子中，绿色边框颜色）。

stepper.component.html

    <mat-horizontal-stepper #stepper [linear]="true" class="{{ 'last-edited-step-' + stepper.selectedIndex }}">

        <mat-step>
        </mat-step>

        <mat-step>
        </mat-step>

        <mat-step>
        </mat-step>

    </mat-horizontal-stepper>

stepper.component.sass

/deep/ mat-horizontal-stepper
  @for $i from 1 through 42
    &.last-edited-step-#{$i}
     @for $j from 1 through $i
        .mat-stepper-horizontal-line:nth-of-type(#{$j})
          border-color: #00c190 !important

使用它，再加上其他一些元素（圆圈、图标、线条比例）的样式，您可以获得如下效果：

【讨论】：

有人可以提供上述stepper.component.sass的css版本吗？
非常感谢您的链接.. 它在其他网站上失败了
乐于助人 ;)
当我检查来自 RTYX 的链接时，它正在重定向到一个陌生的网站。如果您在工作场所，请避免点击它。
好像他们把它拿下来换成了..好吧，你已经知道了。我删除了评论以防止在办公室出现任何不舒服的时刻。

【解决方案4】：

不久前我做了类似的事情，虽然它并不完美，但它可能会帮助你到达那里。你可以反过来想。尝试定位通过活动步骤的所有行。在此示例中，活动步骤之后的所有步骤都有一条虚线，之前的所有步骤都有一条实线。

.mat-stepper-horizontal-line {
   border-top-style: solid;
}

.mat-horizontal-stepper-header {
&[ng-reflect-active='false'] + .mat-stepper-horizontal-line {
  border-top-style: dashed;
}

&[ng-reflect-selected='true'] + .mat-stepper-horizontal-line {
  border-top-style: dashed;
}

}

【讨论】：

感谢您的评论，这不是一个有效的解决方案，也不是我正在尝试的，因为在 prod 中那些反映活动的属性不存在。不过我找到了办法。

【解决方案5】：

这对我来说非常适合更改所选步骤

.mat-horizontal-stepper-header {
  &[ng-reflect-selected="true"].mat-step-header {
    background-color: #000;
  }
&[ng-reflect-selected="false"].mat-step-header {
    background-color: #fff;
  }
}

【讨论】：

【解决方案6】：

I have update the solution to work on Production env. ng-reflect attribute may not be available in prod env.

OLD - 仅适用于开发环境。

我已阅读上述所有解决方案。我想分享我的。您只需要以下两个属性即可了解，无需创建自定义索引。

[ng-reflect-selected='false'] and [ng-reflect-active='true']

以上两种状态共有三种。

[ng-reflect-selected='true'] and [ng-reflect-active='true']
- 它代表当前状态 - 表示当前此步进头处于活动状态。
[ng-reflect-selected='false'] and [ng-reflect-active='true']
- 它代表之前的状态 - 这意味着您已经从这个步进器头继续前进。
[ng-reflect-selected='false'] and [ng-reflect-active='false']
- 它代表下一个状态 - 这意味着您还没有从当前的步进头继续前进。

现在来解决问题。达到this状态。

你需要使用这个[ng-reflect-selected='false'] and [ng-reflect-active='true']

.mat-horizontal-stepper-header {
        &[ng-reflect-selected='false'][ng-reflect-active='true'] + .mat-stepper-horizontal-line {
          border-color: #4ca131; //green color
        }
 }

上面转换成HTML的CSS结构是这样的

<element class="mat-horizontal-stepper-header" ng-reflect-selected="false" 
         ng-reflect-active="true">
    <element class="mat-stepper-horizontal-line">

会改变当前标题前的横线颜色。

更新 - 适用于开发和生产环境。

上述解决方案在生产环境中可能不起作用，因为 ng-reflect 属性可能不可用。为此，您可以检查以下解决方案 - 因为 aria-selected 属性在 dev 和 prod env 中都可用。

.mat-horizontal-stepper-header .mat-stepper-horizontal-line {
     border-top-color: green; //Green Color
     border-top-width: 1px;
     border-top-style: solid;
}


.mat-horizontal-stepper-header[aria-selected='true'] ~ .mat-stepper-horizontal-line{
   border-top-color: hsl(0, 0%, 50%) !important;
}

我所做的是默认情况下，我将所有水平线颜色设置为绿色，然后在选定/当前向导步骤之后将所有水平线颜色更改为灰色。这将使所有先前访问的步进器标题变为绿色。

【讨论】：