Skip to main content
Version: v7 (beta)

ion-toast

shadow

トーストは、最近のアプリケーションでよく使われる小さな通知です。操作に関するフィードバックを提供したり、システムメッセージを表示したりするために使用されます。トーストは、アプリケーションのコンテンツの上に表示され、アプリケーションによって解除されると、アプリケーションとの対話を再開することができます。

インラインToasts (推奨)

ion-toastは、テンプレートに直接コンポーネントを記述して使用することができます。これにより、トーストを表示するために配線する必要があるハンドラの数を減らすことができます。

Using isOpen​

ion-toast の isOpen プロパティは、開発者がアプリケーションの状態からトーストの表示状態を制御できるようにするものです。つまり、isOpen を true に設定するとトーストが表示され、isOpen を false に設定するとトーストは破棄されます。

isOpen は一方通行のデータバインディングを使用しているため、トーストが破棄されたときに自動的に false に設定されることはありません。開発者は ionToastDidDismiss または didDismiss イベントをリスニングして isOpen を false に設定する必要があります。この理由は、ion-toast の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、トーストはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、トーストはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。

Controller Toasts

Dismissing

トーストは静かな通知であり、ユーザーの邪魔をしないように意図されています。そのため、トーストを解除するためにユーザーの操作を必要とするべきではありません。

トーストは、トーストオプションの duration に表示するミリ秒数を渡すことで、特定の時間経過後に自動的に解除されるようにすることができます。もし "cancel" という役割を持つボタンが追加された場合、そのボタンがトーストを終了させます。作成後にトーストを破棄するには、インスタンスの dismiss() メソッドを呼び出してください。

ハードウェアの戻るボタンを押しても、トーストはユーザーの邪魔をしないようになっているので、トーストは破棄されません。

次の例では、buttons プロパティを使用して、クリックすると自動的にトーストを解散させるボタンを追加する方法と、解散イベントの role を収集する方法を示しています。

ポジショニング

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

レイアウト

トースト内のボタンコンテナは、layoutプロパティを使用して、メッセージと同じ行に表示するか、別々の行に積み重ねて表示することができます。スタックレイアウトは、長いテキスト値を持つボタンで使用する必要があります。さらに、スタックトーストレイアウトのボタンは side の値として start または end のどちらかを使用できますが、両方を使用することはできません。

Icons

トースト内のコンテンツの横にアイコンを追加することができます。一般的に、トーストのアイコンはスタイルやコンテキストを追加するために使用されるべきで、ユーザーの注意を引いたり、トーストの優先順位を上げたりするために使用すべきではありません。より優先順位の高いメッセージをユーザーに伝えたい場合や、応答を保証したい場合は、代わりに Alert を使用することをお勧めします。

テーマ

Interfaces

ToastButton

interface ToastButton {
  text?: string;
  icon?: string;
  side?: 'start' | 'end';
  role?: 'cancel' | string;
  cssClass?: string | string[];
  handler?: () => boolean | void | Promise<boolean | void>;
}

ToastOptions

interface ToastOptions {
  header?: string;
  message?: string | IonicSafeString;
  cssClass?: string | string[];
  duration?: number;
  buttons?: (ToastButton | string)[];
  position?: 'top' | 'bottom' | 'middle';
  translucent?: boolean;
  animated?: boolean;
  icon?: string;
  htmlAttributes?: { [key: string]: any };

  color?: Color;
  mode?: Mode;
  keyboardClose?: boolean;
  id?: string;

  enterAnimation?: AnimationBuilder;
  leaveAnimation?: AnimationBuilder;
}

アクセシビリティ

フォーカスの管理

トーストはさりげなく通知するものであり、ユーザーの邪魔をするものではありません。トーストを消すためにユーザーの操作が必要であってはなりません。そのため、トーストが表示されても、フォーカスが自動的に移動することはありません。

スクリーンリーダー

ion-toast は、デフォルトで aria-live="polite" と aria-atomic="true" が設定されています。

aria-live を指定すると、トーストの内容が更新されたときにスクリーンリーダがアナウンスするようになります。しかし、この属性は 'polite' に設定されているため、スクリーン・リーダーは通常、現在のタスクを中断することはありません。開発者は htmlAttributes プロパティを使用して aria-live を 'assertive' に設定することで、この動作をカスタマイズすることができます。これにより、トーストが更新されると、スクリーン・リーダーはすぐにユーザーに通知し、それまでの更新を中断させる可能性があります。

また、aria-atomic="true"を設定すると、トースト全体を1つのユニットとしてアナウンスすることができます。これはトーストのコンテンツを動的に更新するときに便利で、スクリーン・リーダーが変更されたコンテンツのみをアナウンスすることを防ぎます。

ヒント

これは完全なリストではありませんが、トーストを使用する際に従うべきガイドラインをいくつか紹介します。

  • トーストの解除にユーザーの操作を必要としないようにします。例えば、トーストに "Dismiss" ボタンがあるのは良いですが、タイムアウト後にトーストが自動的に終了するようにします。通知のためにユーザーの操作が必要な場合は、代わりに ion-alert を使用することを検討してください。

  • 複数のトーストを連続して開くことは避けてください。もし aria-live が 'assertive' に設定されている場合、スクリーンリーダーは新しいトーストをアナウンスするために現在のタスクの読み込みを中断し、前のトーストのコンテキストが失われる可能性があります。

  • 長いメッセージのトーストの場合は、durationプロパティを調整して、ユーザーがトーストの内容を読むのに十分な時間を確保することを検討してください。

プロパティ

animated

Descriptiontrueの場合、トーストはアニメーションします。
Attributeanimated
Typeboolean
Defaulttrue

buttons

Descriptionトースト用のボタンがずらり。
Attributeundefined
Type(string ｜ ToastButton)[] ｜ undefined
Defaultundefined

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined
Defaultundefined

cssClass

DescriptionカスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。
Attributecss-class
Typestring ｜ string[] ｜ undefined
Defaultundefined

duration

Descriptionトーストを隠すまでに何ミリ秒待つかを指定します。デフォルトでは、dismiss()が呼ばれるまで表示されます。
Attributeduration
Typenumber
Defaultconfig.getNumber('toastDuration', 0)

enterAnimation

Description乾杯の音頭をとるときに使うアニメーションです。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) ｜ undefined
Defaultundefined
Descriptionトーストに表示されるヘッダー。
Attributeheader
Typestring ｜ undefined
Defaultundefined

htmlAttributes

Descriptionトーストに渡す追加の属性。
Attributeundefined
Typeundefined ｜ { [key: string]: any; }
Defaultundefined

icon

Description表示するアイコンの名前、または有効なSVGファイルへのパスを指定します。ion-icon`を参照。https://ionic.io/ionicons
Attributeicon
Typestring ｜ undefined
Defaultundefined

keyboardClose

Descriptiontrueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。
Attributekeyboard-close
Typeboolean
Defaultfalse

layout

Descriptionトーストのメッセージやボタンの配置を定義します。'baseline'を指定します。メッセージとボタンは同じ行に表示されます。メッセージテキストはメッセージコンテナ内で折り返すことができます。'stacked':ボタンコンテナとメッセージが重なるように表示されます。ボタンに長いテキストがある場合に使用します。
Attributelayout
Type"baseline" ｜ "stacked"
Default'baseline'

leaveAnimation

Descriptionトーストの解散時に使用するアニメーションです。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) ｜ undefined
Defaultundefined

message

Description乾杯の際に表示するメッセージ
Attributemessage
TypeIonicSafeString ｜ string ｜ undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" ｜ "md"
Defaultundefined

position

Description画面上のトーストの位置です。
Attributeposition
Type"bottom" ｜ "middle" ｜ "top"
Default'bottom'

translucent

Descriptiontrueの場合、トーストは半透明になります。modeが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。
Attributetranslucent
Typeboolean
Defaultfalse

イベント

NameDescription
ionToastDidDismissトーストが解散した後に発行されます。
ionToastDidPresentトーストが提示された後に発します。
ionToastWillDismiss乾杯が解散する前に発します。
ionToastWillPresentトーストが提示される前に発行されます。

メソッド

dismiss

Descriptionトーストのオーバーレイが提示された後、それを解除します。
Signaturedismiss(data?: any, role?: string) => Promise<boolean>

onDidDismiss

Descriptionトーストが解散したことを解決するPromiseを返します。
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

Descriptionトーストが解散するタイミングを解決するPromiseを返します。
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

Descriptionトーストのオーバーレイを作成した後に提示します。
Signaturepresent() => Promise<void>

CSS Shadow Parts

NameDescription
buttonトーストの内側に表示される任意のボタン要素。
containerすべての子要素を包む要素。
header乾杯のヘッダーテキストです。
iconトーストの内容の横に表示されるアイコンです。
message乾杯の音頭の本文です。

CSSカスタムプロパティ

NameDescription
--background乾杯の背景
--border-colorトーストのボーダーカラー
--border-radiusトーストのボーダー半径
--border-styleトーストのボーダースタイル
--border-widthトーストのボーダー幅
--box-shadow乾杯の箱影
--button-colorボタンテキストの色
--colorトーストの文字色
--end方向が左から右の場合は右から、方向が右から左の場合は左から位置すること
--heightトーストの高さ
--max-heightトーストの最大の高さ
--max-widthトーストの最大幅
--min-heightトーストの最小の高さ
--min-widthトーストの最小幅
--start方向が左から右の場合は左から、方向が右から左の場合は右から位置すること
--white-space乾杯メッセージのホワイトスペース
--widthトーストの幅

Slots

No slots available for this component.

Contents

Edit this page