Add submit button component and style it.
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
<button type="submit" [class]="color" [disabled]="disabled || requestPending" (click)="click.emit()">
|
||||
@if (requestPending) {
|
||||
<mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
|
||||
}
|
||||
<span>
|
||||
{{ label }}
|
||||
</span>
|
||||
</button>
|
||||
@@ -0,0 +1,43 @@
|
||||
button {
|
||||
padding: .8em 1.2em;
|
||||
border-radius: 10em;
|
||||
border: none;
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
transition: background-color .2s ease-in-out;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: #5b6ed8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: #3f51b5;
|
||||
background-color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #f2f4ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #6d7ac5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
mat-spinner {
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
left: calc(50% - 12px);
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .spinner circle {
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
:host ::ng-deep .spinner.secondary circle {
|
||||
stroke: #3f51b5;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
||||
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-submit-button',
|
||||
standalone: true,
|
||||
imports: [MatProgressSpinnerModule, CommonModule],
|
||||
templateUrl: 'submit-button.component.html',
|
||||
styleUrl: 'submit-button.component.scss'
|
||||
})
|
||||
export class SubmitButtonComponent {
|
||||
@Input() requestPending: boolean = false;
|
||||
@Input() label: string = '';
|
||||
@Input() disabled: boolean = false;
|
||||
@Input() color?: 'secondary';
|
||||
@Output() click = new EventEmitter<void>();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user