ion-toast

Contents

Toastは、現代のアプリケーションで一般的に使用される小さな通知です。操作に関するフィードバックを提供したり、システムメッセージを表示したりするために使用できます。Toastはアプリのコンテンツの上に表示され、終了するとアプリとの対話を再開することができます。

作成

Toastのオプションはすべてcreateメソッドに渡す必要があります。表示するメッセージは、 message プロパティーで渡す必要があります。showCloseButton オプションをtrueに設定すると、トーストに閉じるボタンを表示できます。使用可能なすべてのオプションについては、以下のプロパティを参照してください。

ポジション

Toastsは、ビューポートの上部、下部、または中央に配置できます。positionは作成時に値を渡すことができます。指定できる値は、top, bottom , middle です。位置を指定しない場合、Toastはビューポートの下部に表示されます。

消去

Toastオプションの duration に表示する時間をミリ秒単位で指定することで、一定時間後にToastを自動的に閉じることができます。showCloseButton がtrueに設定されている場合、閉じるボタンがトーストを消去します。作成後にToastを削除するには、インスタンスでdismiss()メソッドを呼び出します。

利用方法

import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'toast-example',
  templateUrl: 'toast-example.html',
  styleUrls: ['./toast-example.css'],
})
export class ToastExample {

  constructor(public toastController: ToastController) {}

  async presentToast() {
    const toast = await this.toastController.create({
      message: 'Your settings have been saved.',
      duration: 2000
    });
    toast.present();
  }

  async presentToastWithOptions() {
    const toast = await this.toastController.create({
      header: 'Toast header',
      message: 'Click to Close',
      position: 'top',
      buttons: [
        {
          side: 'start',
          icon: 'star',
          text: 'Favorite',
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Done',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    toast.present();
  }

}
async function presentToast() {
  const toastController = document.querySelector('ion-toast-controller');

  const toast = await toastController.create({
    message: 'Your settings have been saved.',
    duration: 2000
  });
  return await toast.present();
}

async function presentToastWithOptions() {
  const toastController = document.querySelector('ion-toast-controller');

  const toast = await toastController.create({
    header: 'Toast header',
    message: 'Click to Close',
    position: 'top',
    buttons: [
      {
        side: 'start',
        icon: 'star',
        text: 'Favorite',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Done',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }
    ]
  });

  return await toast.present();
}
import React, { useState } from 'react';
import { IonToast, IonContent, IonButton } from '@ionic/react';

export const ToastExample: React.FunctionComponent = () => {
  const [showToast1, setShowToast1] = useState(false);
  const [showToast2, setShowToast2] = useState(false);

  return (
    <IonContent>
      <IonButton onClick={() => setShowToast1(true)} expand="block">Show Toast 1</IonButton>
      <IonButton onClick={() => setShowToast2(true)} expand="block">Show Toast 2</IonButton>
      <IonToast
        isOpen={showToast1}
        onDidDismiss={() => setShowToast1(false)}
        message="Your settings have been saved."
        duration={200}
      />

      <IonToast
        isOpen={showToast2}
        onDidDismiss={() => setShowToast2(false)}
        message="Click to Close"
        position="top"
        buttons={[
          {
            side: 'start',
            icon: 'star',
            text: 'Favorite',
            handler: () => {
              console.log('Favorite clicked');
            }
          },
          {
            text: 'Done',
            role: 'cancel',
            handler: () => {
              console.log('Cancel clicked');
            }
          }
        ]}
      />
    </IonContent>
  );
};

プロパティ

animated

Description

If true, the toast will animate.

Attributeanimated
Typeboolean
Defaulttrue

buttons

Description

An array of buttons for the toast.

Type(string | ToastButton)[] | undefined

closeButtonText

Description
Attributeclose-button-text
Typestring | undefined

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attributecolor
Typestring | undefined

cssClass

Description

Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.

Attributecss-class
Typestring | string[] | undefined

duration

Description

How many milliseconds to wait before hiding the toast. By default, it will show until dismiss() is called.

Attributeduration
Typenumber
Default0

enterAnimation

Description

Animation to use when the toast is presented.

Type((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined

header

Description

Header to be shown in the toast.

Attributeheader
Typestring | undefined

keyboardClose

Description

If true, the keyboard will be automatically dismissed when the overlay is presented.

Attributekeyboard-close
Typeboolean
Defaultfalse

leaveAnimation

Description

Animation to use when the toast is dismissed.

Type((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined

message

Description

Message to be shown in the toast.

Attributemessage
Typestring | undefined

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

position

Description

The position of the toast on the screen.

Attributeposition
Type"bottom" | "middle" | "top"
Default'bottom'

showCloseButton

Description
Attributeshow-close-button
Typeboolean
Defaultfalse

translucent

Description

If true, the toast will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.

Attributetranslucent
Typeboolean
Defaultfalse

イベント

NameDescription
ionToastDidDismissEmitted after the toast has dismissed.
ionToastDidPresentEmitted after the toast has presented.
ionToastWillDismissEmitted before the toast has dismissed.
ionToastWillPresentEmitted before the toast has presented.

メソッド

dismiss

Description

Dismiss the toast overlay after it has been presented.

Signaturedismiss(data?: any, role?: string | undefined) => Promise<boolean>

onDidDismiss

Description

Returns a promise that resolves when the toast did dismiss.

SignatureonDidDismiss() => Promise<OverlayEventDetail<any>>

onWillDismiss

Description

Returns a promise that resolves when the toast will dismiss.

SignatureonWillDismiss() => Promise<OverlayEventDetail<any>>

present

Description

Present the toast overlay after it has been created.

Signaturepresent() => Promise<void>

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the toast
--border-colorBorder color of the toast
--border-radiusBorder radius of the toast
--border-styleBorder style of the toast
--border-widthBorder width of the toast
--box-shadowBox shadow of the toast
--button-colorColor of the button text
--colorColor of the toast text
--endPosition from the right if direction is left-to-right, and from the left if direction is right-to-left
--heightHeight of the toast
--max-heightMaximum height of the toast
--max-widthMaximum width of the toast
--min-heightMinimum height of the toast
--min-widthMinimum width of the toast
--startPosition from the left if direction is left-to-right, and from the right if direction is right-to-left
--widthWidth of the toast
View Source