Add submit button component and style it.

This commit is contained in:
Florian THIERRY
2024-08-22 10:26:38 +02:00
parent b1d9344574
commit f00fb103ba
10 changed files with 139 additions and 9 deletions

View File

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

View File

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

View File

@@ -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>();
}