角材料步进机头线样式

时间：2018-11-16 20:24:57

标签： angular angular-material

我正在尝试为步骤实现这种设计，但是到目前为止，我获得的最接近的结果是未成功，它正在为当前活动步骤旁边的行添加颜色：

.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;
}

}

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

desired steps design

对此有何想法？ 这是复制https://stackblitz.com/edit/angular-ngcsei

6 个答案:

答案 0 :(得分：1)

在生产环境中，那些反映活动属性的属性不存在，因此我根据元素索引提出了此解决方案。我只是给mat-h​​orizo​​ntal-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);
}

答案 1 :(得分：0)

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

.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;
}

}

答案 2 :(得分：0)

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

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

答案 3 :(得分：0)

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

在HTML中，我为mat-horizontal-stepper的{​​{1}}提供了一个类。

就CSS而言，我使用SASS动态生成了用于循环的类，因此从'last-edited-step-'last-edited-step-' + stepper.selectedIndex到$i循环（.last-edited-step-last-edited-step-1）（以42为例）当然是步骤数）。然后在它们每个内部，我又在第一行和第n行之间循环（.last-edited-step-last-edited-step-42），然后分配属性（在我的情况下为绿色边框）。

stepper.component.html 

$j

stepper.component.sass 

    <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>

使用该样式以及一些其他元素（圆形，图标，线比例）的样式，您可以获得以下内容：

Result with coloured lines between steps

答案 4 :(得分：0)

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

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>

答案 5 :(得分：0)

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']

以上两种状态有三种。

  1. [ng-reflect-selected='true'] and [ng-reflect-active='true']

    • 它代表当前状态-表示当前此步进标头处于活动状态。

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

    • 它代表以前的状态-这意味着您已经从此步进器标题继续前进。

  3. [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">

它将更改当前标题之前的水平线颜色。

UPDATE-在开发环境和生产环境中均可使用。

上述解决方案可能无法在生产环境中使用，因为ng-reflect属性可能不可用。为此，您可以在下面的解决方案中进行检查-在开发环境和产品环境中都可以使用 aria-selected 属性。

.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;
}

以上操作是默认情况下，我将所有水平线颜色设置为绿色，然后在选定/当前向导步骤之后将所有水平线颜色转换为灰色，这将使之前访问的所有步进器标头都变为绿色。

相关问题
最新问题