Update folder structure
This commit is contained in:
56
src/app/components/messages/messages.component.html
Executable file
56
src/app/components/messages/messages.component.html
Executable file
@@ -0,0 +1,56 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Toast</h5>
|
||||
<p-toast key="tst" [baseZIndex]="99999"></p-toast>
|
||||
<button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2"></button>
|
||||
<button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2"></button>
|
||||
<button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2"></button>
|
||||
<button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card z-3">
|
||||
<h5>Messages</h5>
|
||||
<button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2"></button>
|
||||
<button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2"></button>
|
||||
<button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning mr-2"></button>
|
||||
<button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger"></button>
|
||||
|
||||
<p-messages [value]="msgs"></p-messages>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="field grid">
|
||||
<label for="username" class="col-fixed w-9rem">Username</label>
|
||||
<div class="col">
|
||||
<input id="username" type="text" #username pInputText placeholder="Username" class="ng-dirty ng-invalid mr-2">
|
||||
<p-message severity="error" text="Field is required"></p-message>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field grid">
|
||||
<label for="email" class="col-fixed w-9rem">Email</label>
|
||||
<div class="col">
|
||||
<input type="text" #email pInputText placeholder="Email" label="email" class="ng-dirty ng-invalid mr-2">
|
||||
<p-message severity="error"></p-message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="field p-fluid">
|
||||
<label for="username2">Username</label>
|
||||
<input id="username2" type="username" aria-describedby="username-help" class="ng-dirty ng-invalid" pInputText />
|
||||
<small id="username-help" class="p-error">Enter your username to reset your password.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
59
src/app/components/messages/messages.component.ts
Executable file
59
src/app/components/messages/messages.component.ts
Executable file
@@ -0,0 +1,59 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {Message, MessageService} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './messages.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep .p-message {
|
||||
margin-left: .25em;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-toast{
|
||||
margin-top: 5.70em;
|
||||
z-index:99999;
|
||||
}
|
||||
`],
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class MessagesComponent {
|
||||
|
||||
msgs: Message[] = [];
|
||||
|
||||
constructor(private service: MessageService) {}
|
||||
|
||||
showInfoViaToast() {
|
||||
this.service.add({key: 'tst', severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks'});
|
||||
}
|
||||
|
||||
showWarnViaToast() {
|
||||
this.service.add({key: 'tst', severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes'});
|
||||
}
|
||||
|
||||
showErrorViaToast() {
|
||||
this.service.add({ key: 'tst', severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
|
||||
}
|
||||
|
||||
showSuccessViaToast() {
|
||||
this.service.add({ key: 'tst', severity: 'success', summary: 'Success Message', detail: 'Message sent' });
|
||||
}
|
||||
|
||||
showInfoViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' });
|
||||
}
|
||||
|
||||
showWarnViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' });
|
||||
}
|
||||
|
||||
showErrorViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
|
||||
}
|
||||
|
||||
showSuccessViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user