css - Mat-Stepper - 将特定步骤更改为仅点
问题描述
我已经看过这篇关于如何删除标题的帖子 Remove the Material Stepper header
但是我在特定步骤上想要的只是在显示数字的跨度上不显示任何内容。
隐藏步进器的内部:
<span class="mat-step-icon-content ng-star-inserted">1</span>
我尝试使用 id 和 .span:after 或只是 .span 不显示,但没有运气..
#importer > .span{
display:none;
}
这个可行,但我不希望它一起消失..只是数字和特定步骤..
::ng-deep #importer > .mat-horizontal-stepper-header-container {
display: none !important;
}
更新
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>
看看它是如何工作 的 https://drive.google.com/file/d/1ScbvJZdwQFUIuBggYe8D0jzEdgjGqLU-/view
问题 :
1) 步进器的响应性;
2)正确的样式只有在经过特定的步进步骤之后
解决方案
您将无法通过使用类来做到这一点,因此它不能是动态的。如果这不是问题,那么我建议使用 SASS mixin 来创建每个标题项所需的样式。例子:
演示
@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');
}
推荐阅读
- bash - 如何使用`ip`在bash中获取设备的网络掩码?
- java - 通过Java中的流复制数组的每个元素
- swift - Swift:检查日期是否与日期数组中的任何一天相同?
- c# - 是否可以在 Visual Studio 的 Locals 或 Watch 窗口中实际看到 lambda 的表达式?
- object - EF5 对象属性不会保存在数据库中
- python - 如何使用python3从json中的dicts列表中解析内容
- emacs - gtags 生成带有 pygments 的空 GTAGS 文件
- linux - 将流量转发到 iptables 中的自定义密钥链
- google-app-engine - 无法从 Sails mysql 连接到 Cloud SQL
- mysql - MySQL - 查询具有基于另一个表的更新的行