トースト通知

1<!-- miscToastNotification.html -->
2<template>
3  <lightning-card title="miscToastNotification" icon-name="custom:custom19">
4    <div class="slds-m-around_medium">
5      <lightning-input label="Title" value={_title} onchange={titleChange}></lightning-input>
6      <lightning-input
7        label="Message"
8        value={message}
9        onchange={messageChange}>
10      </lightning-input>
11      <lightning-combobox
12        label="Variant"
13        value={variant}
14        onchange={variantChange}
15        options={variantOptions}>
16      </lightning-combobox>
17      <p class="slds-m-vertical_small">
18        <lightning-button label="Show Notification" onclick={showNotification}></lightning-button>
19      </p>
20    </div>
21  </lightning-card>
22</template>

1// miscToastNotification.js
2import { LightningElement } from "lwc";
3import { ShowToastEvent } from "lightning/platformShowToastEvent";
4
5export default class MiscToastNotification extends LightningElement {
6  _title = "Sample Title";
7  message = "Sample Message";
8  variant = "error";
9  variantOptions = [
10    { label: "error", value: "error" },
11    { label: "warning", value: "warning" },
12    { label: "success", value: "success" },
13    { label: "info", value: "info" },
14  ];
15
16  titleChange(event) {
17    this._title = event.target.value;
18  }
19
20  messageChange(event) {
21    this.message = event.target.value;
22  }
23
24  variantChange(event) {
25    this.variant = event.target.value;
26  }
27
28  showNotification() {
29    const evt = new ShowToastEvent({
30      title: this._title,
31      message: this.message,
32      variant: this.variant,
33    });
34    this.dispatchEvent(evt);
35  }
36}