Mat-Stepper - 将特定步骤更改为点 [英] Mat-Stepper - change specific steps to just dots
本文介绍了Mat-Stepper - 将特定步骤更改为点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我看过这篇关于如何删除标题的帖子移除 Material Stepper 标头
但我想要在特定步骤上不显示任何显示数字的跨度.
隐藏步进器的内部:
我尝试使用 id 和 .span:after 或仅使用 .span 显示 none，但没有运气..
#importer >.跨度{显示:无；}这个有效，但我不希望它一起消失......只是数字和特定步骤......
::ng-deep #importer >.mat-horizontal-stepper-header-container {显示:无！重要；}<小时><块引用>
更新
<小时>
import {成分，初始化，视图子，变更检测器引用来自'@angular/core';进口 {表单生成器，表单组，验证器来自'@angular/forms';进口 {实体}来自'../../models/entity';进口 {实体组件} 来自'../../entity/entity/entity/entity.component';进口 {垫子步进器来自'@angular/material';进口 {步进动作} 来自'../../models/stepper-actions';@成分({选择器:'步进'，templateUrl: './stepper.component.html',styleUrls: ['./stepper.component.scss']})导出类 StepperComponent 实现 OnInit {isLinear = false;步骤 = 新数组(13)；构造函数(私有 CD:ChangeDetectorRef){}ngOnInit() {this.cd.detectChanges();}}@mixin hide-option($index, $label: '') {mat-step-header:nth-of-type(#{$index}) {.mat-step-icon-not-touched 跨度，.mat-step-icon 跨度，.mat-step-icon-not-touched .mat-icon,.mat-step-icon .mat-icon {显示:无；}@if ($label=='') {.mat-step-icon {高度:5px！重要；宽度:5px ！重要；}}.mat-step-icon-not-touched:after,.mat-step-icon:after {内容:$label;位置:绝对；左:8px；顶部:3px；}}}:主机/深/{mat-step-header .mat-step-label {溢出:可见；}@include 隐藏选项(1, '1');@include 隐藏选项(2);@include 隐藏选项(3);@include 隐藏选项(4);@include 隐藏选项(5, '2');@include 隐藏选项(6);@include 隐藏选项(7);@include 隐藏选项(8);@include 隐藏选项(9, '3');@include 隐藏选项(10, '4');@include 隐藏选项(11);@include 隐藏选项(12, '5');@include 隐藏选项(13, '6');}<mat-horizontal-stepper [linear]="true" #stepper><mat-step *ngFor="let i of steps" [stepControl]="i.childForm"><cby-step #i [stepper]='stepper'></cby-step></mat-step></mat-horizontal-stepper>import {成分，初始化，输入，输出，事件发射器来自'@angular/core';进口 {垫子步进器来自'@angular/material';进口 {表单组，表单生成器来自'@angular/forms';@成分({选择器:'cby-step'，templateUrl: './cby-step.component.html',styleUrls: ['./cby-step.component.scss']})导出类 CbyStepComponent 实现 OnInit {@Input() 步进器:MatStepper；公共 childForm:FormGroup；构造函数(私有 fb:FormBuilder){}ngOnInit() {this.childForm = this.fb.group({id: [0, '']});}以前的() {this.updateForm();this.stepper.previous();}下一个() {this.updateForm();this.stepper.next();}更新表格(){this.childForm.controls['id'].setValue(this.stepper.selectedIndex);console.log(this.childForm.controls['id'].value);}}<p>{{stepper.selectedIndex}} 步骤有效！</p><button mat-button (click)="previous()">返回</button><button mat-button (click)="next()">Next</button>看看它是如何工作的https://drive.google.com/file/d/1ScbvJZdwQFUIuBggYe8D0jzLUEdg
问题:
1) 步进器的响应性；
2) 正确的样式只有经过了具体的步进器步骤
解决方案
您将无法通过使用类来做到这一点，因此它不能是动态的.如果这不是问题，那么我建议使用 SASS mixin 来创建每个标题项所需的样式.示例:
演示
@mixin hide-option($index, $label: '') {mat-step-header:nth-of-type(#{$index}) {.mat-step-icon-not-touched 跨度，.mat-step-icon 跨度，.mat-step-icon-not-touched .mat-icon,.mat-step-icon .mat-icon {显示:无；}@if ($label == '') {.mat-step-icon {高度:5px；宽度:5px；}}.mat-step-icon-not-touched:after,.mat-step-icon:after {内容:$label;位置:绝对；左:8px；顶部:3px；}}}:主机/深/{mat-step-header .mat-step-label {溢出:可见；}@include 隐藏选项(1, '1');@include 隐藏选项(2);@include 隐藏选项(3);@include 隐藏选项(4);@include 隐藏选项(5, '2');@include 隐藏选项(6);@include 隐藏选项(7);@include 隐藏选项(8);@include 隐藏选项(9, '3');@include 隐藏选项(10, '4');@include 隐藏选项(11);@include 隐藏选项(12, '5');@include 隐藏选项(13, '6');}I've seen this post on how to remove the header Remove the Material Stepper header
But all I want on specific steps is to display none on span showing the number.
Hide this inner part of the stepper:
<span class="mat-step-icon-content ng-star-inserted">1</span>
I tried with id and .span:after or just .span with display none, but no luck..
#importer > .span{
display:none;
}
This one works but I don't want it to disappear all together.. just the number and just on specific steps..
::ng-deep #importer > .mat-horizontal-stepper-header-container {
display: none !important;
}
Udpate
import {
Component,
OnInit,
ViewChild,
ChangeDetectorRef
} from '@angular/core';
import {
FormBuilder,
FormGroup,
Validators
} from '@angular/forms';
import {
Entity
} from '../../models/entity';
import {
EntityComponent
} from '../../entity/entity/entity/entity.component';
import {
MatStepper
} from '@angular/material';
import {
stepperActions
} from '../../models/stepper-actions';
@Component({
selector: 'stepper',
templateUrl: './stepper.component.html',
styleUrls: ['./stepper.component.scss']
})
export class StepperComponent implements OnInit {
isLinear = false;
steps = new Array(13);
constructor(private cd: ChangeDetectorRef) {}
ngOnInit() {
this.cd.detectChanges();
}
}
@mixin hide-option($index, $label: '') {
mat-step-header:nth-of-type(#{$index}) {
.mat-step-icon-not-touched span,
.mat-step-icon span,
.mat-step-icon-not-touched .mat-icon,
.mat-step-icon .mat-icon {
display: none;
}
@if ($label=='') {
.mat-step-icon {
height: 5px !important;
width: 5px !important;
}
}
.mat-step-icon-not-touched:after,
.mat-step-icon:after {
content: $label;
position: absolute;
left: 8px;
top: 3px;
}
}
}
:host /deep/ {
mat-step-header .mat-step-label {
overflow: visible;
}
@include hide-option(1, '1');
@include hide-option(2);
@include hide-option(3);
@include hide-option(4);
@include hide-option(5, '2');
@include hide-option(6);
@include hide-option(7);
@include hide-option(8);
@include hide-option(9, '3');
@include hide-option(10, '4');
@include hide-option(11);
@include hide-option(12, '5');
@include hide-option(13, '6');
}
<div class="teal-theme">
<mat-horizontal-stepper [linear]="true" #stepper>
<mat-step *ngFor="let i of steps" [stepControl]="i.childForm">
<cby-step #i [stepper]='stepper'></cby-step>
</mat-step>
</mat-horizontal-stepper>
</div>
import {
Component,
OnInit,
Input,
Output,
EventEmitter
} from '@angular/core';
import {
MatStepper
} from '@angular/material';
import {
FormGroup,
FormBuilder
} from '@angular/forms';
@Component({
selector: 'cby-step',
templateUrl: './cby-step.component.html',
styleUrls: ['./cby-step.component.scss']
})
export class CbyStepComponent implements OnInit {
@Input() stepper: MatStepper;
public childForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.childForm = this.fb.group({
id: [0, '']
});
}
previous() {
this.updateForm();
this.stepper.previous();
}
next() {
this.updateForm();
this.stepper.next();
}
updateForm() {
this.childForm.controls['id'].setValue(this.stepper.selectedIndex);
console.log(this.childForm.controls['id'].value);
}
}
<p>
{{stepper.selectedIndex}} step works!
</p>
<button mat-button (click)="previous()">Back</button>
<button mat-button (click)="next()">Next</button>
See How it works https://drive.google.com/file/d/1ScbvJZdwQFUIuBggYe8D0jzEdgjGqLU-/view
Issues :
1) Responsiveness of the stepper ;
2) The right style is only after passing through the specific stepper step
解决方案
You won't be able to do this by using classes so it will not be able to be dynamic. If this is not a problem then I would recommend using a SASS mixin to create the styles you will need for each header item. Example:
Demo
@mixin hide-option($index, $label: '') {
mat-step-header:nth-of-type(#{$index}) {
.mat-step-icon-not-touched span,
.mat-step-icon span,
.mat-step-icon-not-touched .mat-icon,
.mat-step-icon .mat-icon {
display: none;
}
@if ($label == '') {
.mat-step-icon {
height: 5px;
width: 5px;
}
}
.mat-step-icon-not-touched:after,
.mat-step-icon:after {
content: $label;
position: absolute;
left: 8px;
top: 3px;
}
}
}
:host /deep/ {
mat-step-header .mat-step-label {
overflow: visible;
}
@include hide-option(1, '1');
@include hide-option(2);
@include hide-option(3);
@include hide-option(4);
@include hide-option(5, '2');
@include hide-option(6);
@include hide-option(7);
@include hide-option(8);
@include hide-option(9, '3');
@include hide-option(10, '4');
@include hide-option(11);
@include hide-option(12, '5');
@include hide-option(13, '6');
}
这篇关于Mat-Stepper - 将特定步骤更改为点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
