Message - HackMD

## Message [🔗](https://pialm01/tfs/DefaultCollection/MIDLXACO01-AO/_git/cub-design-guideline-primeng/commit/62bf66e6539f393856aae3a0844fc6af7286e67e?refName=refs%2Fheads%2Ffeature%2Ftest-v18) ### Import ==v14== 需導入 MessagesModule，使用 <p-messages> 實現功能。詳細使用方式請參考 PrimeNG Messages。 https://v17.primeng.org/messages ```typescript import { MessagesModule } from 'primeng/messages'; ``` ==v18== 需導入 MessageModule，使用 <p-message> 實現功能。詳細使用方式請參考 PrimeNG Message。 https://primeng.org/message ```typescript import { MessageModule } from 'primeng/message'; ``` ### Getting start ==v14== ```html <p-messages [(value)]="msgs"></p-messages> ``` ```typescript import { Message } from 'primeng/api'; msgs: Message[] = [ { severity: 'success', summary: 'Success', detail: 'Message Content' }, { severity: 'info', summary: 'Info', detail: 'Message Content' }, { severity: 'warn', summary: 'Warn', detail: 'Message Content' }, { severity: 'error', summary: 'Error', detail: 'Message Content' }, { severity: 'custom', summary: 'Custom', detail: 'Message Content', icon: 'pi-file' }, ] ``` ==v18== ```html <p-message severity="success" icon="pi pi-check">Success Message</p-message> ``` ```typescript import { ToastMessageOptions } from 'primeng/api'; import { MESSAGE_ICONS } from 'src/app/core/constants/message-config'; messageIcon = MESSAGE_ICONS; msgs: ToastMessageOptions[] = [ { severity: 'success', summary: 'Success', detail: 'Message Content' }, { severity: 'info', summary: 'Info', detail: 'Message Content' }, { severity: 'warn', summary: 'Warn', detail: 'Message Content' }, { severity: 'error', summary: 'Error', detail: 'Message Content' }, { severity: 'custom', summary: 'Custom', detail: 'Message Content'}, ] ``` ```typescript // message-config.ts const MESSAGE_ICONS = { success: 'pi pi-check', info: 'pi pi-info-circle', warn: 'pi pi-exclamation-triangle', error: 'pi pi-times-circle', custom: 'pi pi-file' } as const; ``` ### Closable ==v14== 預設情況下 closable 是開啟的，如不需關閉按鈕則設置為 false ```html <p-messages [(value)]="msgs" [closable]="true"></p-messages> ``` ==v18== 預設情況下 closable 是關閉的，如需關閉按鈕則新增屬性 closable ```html <p-message [severity]="msg.severity" [icon]="messageIcon[msg.severity!]" closable> <div> <span class="p-message-summary">{{msg.summary}}</span> <div class="p-message-detail">{{msg.detail}}</div> </div> </p-message> ``` ### Default ==v14== ```html <p-messages [(value)]="msgs" [closable]="false"></p-messages> ``` ==v18== ```html <p-message [severity]="msg.severity" [icon]="messageIcon[msg.severity!]" *ngFor="let msg of msgs"> <div> <span class="p-message-summary">{{msg.summary}}</span> <div class="p-message-detail">{{msg.detail}}</div> </div> </p-message> ``` ### With button ==v14== ```html <p-messages severity="success" *ngIf="isMessages"> <ng-template pTemplate> <img src="assets/showcase/images/primeng.svg" width="32" /> <div class="p-message-summary">Success</div> <div class="p-message-detail">Message Content</div> <div style="flex: 1 1 auto"></div> <button pButton type="button" label="Button" class="cub-btn cub-btn-primary cub-btn-lg mr-8"></button> <button type="button" class="p-ripple p-message-close p-link" (click)="delete()"> <div class="p-message-close-icon pi pi-times"></div> </button> </ng-template> </p-messages> ``` ==v18== ```html <p-message severity="success" *ngIf="isMessages" closable> <div class="d-flex justify-content-between"> <img src="assets/showcase/images/primeng.svg" width="32" /> <div class="p-message-summary">Success</div> <div class="p-message-detail">Message Content</div> <button pButton type="button" label="Button" class="cub-btn cub-btn-primary cub-btn-lg ml-auto mr-8"></button> </div> </p-message> ``` ### Inline Message ==v14== ```html <div class="d-flex flex-row mb-16"> <p-message severity="info" text="Message Content" styleClass="p-mr-2"></p-message> <p-message severity="success" text="Message Content" styleClass="p-mr-2"></p-message> <p-message severity="warn" text="Message Content" styleClass="p-mr-2"></p-message> <p-message severity="error" text="Message Content"></p-message> </div> ``` ==v18== ```html <div class="d-flex flex-row mb-16"> <p-message class="p-inline-message" severity="info" [icon]="messageIcon['info']" text="Message Content" styleClass="p-mr-2"></p-message> <p-message class="p-inline-message" severity="success" [icon]="messageIcon['success']" text="Message Content" styleClass="p-mr-2"></p-message> <p-message class="p-inline-message" severity="warn" [icon]="messageIcon['warn']" text="Message Content" styleClass="p-mr-2"></p-message> <p-message class="p-inline-message" severity="error" [icon]="messageIcon['error']" text="Message Content"></p-message> </div> ```