Web Components Toast (トースト)

    Ignite UI for Web Components Toast コンポーネントは、主にシステム メッセージ、プッシュ通知、警告メッセージ、および情報に使用されます。ユーザーが却下することはできません。

    Ignite UI for Web Components Toast の例

    使用方法

    まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

    npm install igniteui-webcomponents
    
    import { defineComponents, IgcToastComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcToastComponent);
    

    Toast コンポーネントを表示する最も簡単な方法は、show メソッドを使用して、ボタン クリックで呼び出すことです。

    <igc-button onclick="toast.show()" variant="contained">Show Toast</igc-button>
    <igc-toast id="toast">Toast Message</igc-toast>
    

    コード例

    プロパティ

    displayTime プロパティを使用して、Toast コンポーネントが表示される期間を構成します。デフォルトでは、4000 ミリ秒に設定されています。

    デフォルトでは、Toast コンポーネントは、displayTime で指定された期間が経過すると自動的に非表示になります。keepOpen プロパティを使用して、この動作を変更できます。このようにして、Toast は表示されたままになります。

    <igc-button onclick="toast.toggle()" variant="contained">Toggle Toast</igc-button>
    <igc-button onclick="toast.keepOpen = !toast.keepOpen" variant="contained">Toggle keepOpen property</igc-button>
    <igc-button onclick="toast.displayTime = 8000" variant="contained">Set DisplayTime to 8000</igc-button>
    
    <igc-toast id="toast">Toast Message</igc-toast>
    

    スタイル設定

    タグ セレクターを直接使用して、Toast のスタイルを設定できます:

    igc-toast {
        background: #011627;
        color: #ECAA53;
        outline-color: #ECAA53;
    }
    

    API リファレンス

    その他のリソース