angular - 向页面添加进度条
问题描述
我正在尝试以角度制作进度条。我开始使用 angular mmat-stepper,我的代码如下:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatStepperModule, MatInputModule, MatButtonModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatStepperModule, MatInputModule, MatButtonModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
我的html页面::
<mat-horizontal-stepper [linear] = "isLinear" #stepper>
<mat-step [stepControl] = "firstFormGroup">
<form [formGroup] = "firstFormGroup">
<ng-template matStepLabel>Enter your name</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>
</form>
</mat-step>
<mat-step [stepControl] = "secondFormGroup">
<form [formGroup] = "secondFormGroup">
<ng-template matStepLabel>Enter your address</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>
Details taken.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click) = "stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>
我的组件如下::
import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
import { FormGroup } from "@angular/forms";
import { FormBuilder } from "@angular/forms";
import { Validators } from "@angular/forms";
export interface Food {
value: string;
display: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'materialApp';
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
}
}
我得到的输出是这样的::
期望的输出::
通过使用以下 CSS ::
.mat-stepper-horizontal-line {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
我能够获得以下进度条::
但我没有得到那些更大尺寸的蓝色倾斜三角形。如何获得与所需输出图像相同的进度条?
解决方案
如果你想用你的设计创建你自己的步进器,我建议你从 Material CDK 步进器(https://material.angular.io/cdk/stepper/overview)创建,你可以改变一切,传递任何常量、别名和其他的东西,我不知道是否真的是你想要的,但我希望我对你有帮助......但是如果你搜索如何创建进度条,在材料角网站(https://material.angular.io /components/progress-bar/overview)也非常好!
推荐阅读
- buffer - 如何仅在多边形外部进行缓冲并使共享边缘不缓冲?
- r - 在 Docker 中安装 R 包“devtools”时出现问题 - 安装 git2r 时出错
- jquery - 为什么我的 $.post() 不工作而 $.ajax() 工作?
- c - 我的 fork 进程是并行运行还是一个接一个地执行?
- sql-server - TSQL 找出应该在两个日期/时间之间运行的 SSRS 报告
- azure - 需要 Microsoft OAuth2 流程的信息
- expo - expo 中的 Apollo 客户端 useMutation 每次调用都会渲染两次
- python - Beautifulsoup 不显示所有 html 元素
- r - 如何自动将值放入函数中
- python - Python 套接字密码输入