shadowトーストは、最近のアプリケーションでよく使われる小さな通知です。操作に関するフィードバックを提供したり、システムメッセージを表示したりするために使用されます。トーストは、アプリケーションのコンテンツの上に表示され、アプリケーションによって解除されると、アプリケーションとの対話を再開することができます。
ion-toastは、テンプレートに直接コンポーネントを記述して使用することができます。これにより、トーストを表示するために配線する必要があるハンドラの数を減らすことができます。
ion-toast の isOpen プロパティは、開発者がアプリケーションの状態からトーストの表示状態を制御できるようにするものです。つまり、isOpen を true に設定するとトーストが表示され、isOpen を false に設定するとトーストは破棄されます。
isOpen は一方通行のデータバインディングを使用しているため、トーストが破棄されたときに自動的に false に設定されることはありません。開発者は ionToastDidDismiss または didDismiss イベントをリスニングして isOpen を false に設定する必要があります。この理由は、ion-toast の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、トーストはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、トーストはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
トーストは静かな通知であり、ユーザーの邪魔をしないように意図されています。そのため、トーストを解除するためにユーザーの操作を必要とするべきではありません。
トーストは、トーストオプションの duration に表示するミリ秒数を渡すことで、特定の時間経過後に自動的に解除されるようにすることができます。もし "cancel" という役割を持つボタンが追加された場合、そのボタンがトーストを終了させます。作成後にトーストを破棄するには、インスタンスの dismiss() メソッドを呼び出してください。
ハードウェアの戻るボタンを押しても、トーストはユーザーの邪魔をしないようになっているので、トーストは破棄されません。
次の例では、buttons プロパティを使用して、クリックすると自動的にトーストを解散させるボタンを追加する方法と、解散イベントの role を収集する方法を示しています。
トーストは、ビューポートの上部、下部、中部に配置することができます。位置は作成時に渡すことができます。指定できる値は top, bottom, middle です。位置が指定されない場合、トーストはビューポートの一番下に表示されます。
トースト内のボタンコンテナは、layoutプロパティを使用して、メッセージと同じ行に表示するか、別々の行に積み重ねて表示することができます。スタックレイアウトは、長いテキスト値を持つボタンで使用する必要があります。さらに、スタックトーストレイアウトのボタンは side の値として start または end のどちらかを使用できますが、両方を使用することはできません。
トースト内のコンテンツの横にアイコンを追加することができます。一般的に、トーストのアイコンはスタイルやコンテキストを追加するために使用されるべきで、ユーザーの注意を引いたり、トーストの優先順位を上げたりするために使用すべきではありません。より優先順位の高いメッセージをユーザーに伝えたい場合や、応答を保証したい場合は、代わりに Alert を使用することをお勧めします。
interface ToastButton {
text?: string;
icon?: string;
side?: 'start' | 'end';
role?: 'cancel' | string;
cssClass?: string | string[];
handler?: () => boolean | void | Promise<boolean | void>;
}
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プロパティを調整して、ユーザーがトーストの内容を読むのに十分な時間を確保することを検討してください。
| Description | trueの場合、トーストはアニメーションします。 |
| Attribute | animated |
| Type | boolean |
| Default | true |
| Description | トースト用のボタンがずらり。 |
| Attribute | undefined |
| Type | (string ｜ ToastButton)[] ｜ undefined |
| Default | undefined |
| 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. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined |
| Default | undefined |
| Description | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. |
| Attribute | css-class |
| Type | string ｜ string[] ｜ undefined |
| Default | undefined |
| Description | How many milliseconds to wait before hiding the toast. By default, it will show until dismiss() is called. |
| Attribute | duration |
| Type | number |
| Default | config.getNumber('toastDuration', 0) |
| Description | 乾杯の音頭をとるときに使うアニメーションです。 |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
| Description | トーストに表示されるヘッダー。 |
| Attribute | header |
| Type | string ｜ undefined |
| Default | undefined |
| Description | トーストに渡す追加の属性。 |
| Attribute | undefined |
| Type | undefined ｜ { [key: string]: any; } |
| Default | undefined |
| Description | The name of the icon to display, or the path to a valid SVG file. See ion-icon. https://ionic.io/ionicons |
| Attribute | icon |
| Type | string ｜ undefined |
| Default | undefined |
| Description | If true, the toast will open. If false, the toast will close. Use this if you need finer grained control over presentation, otherwise just use the toastController or the trigger property. Note: isOpen will not automatically be set back to false when the toast dismisses. You will need to do that in your code. |
| Attribute | is-open |
| Type | boolean |
| Default | false |
| Description | trueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 |
| Attribute | keyboard-close |
| Type | boolean |
| Default | false |
| Description | Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons. |
| Attribute | layout |
| Type | "baseline" ｜ "stacked" |
| Default | 'baseline' |
| Description | トーストの解散時に使用するアニメーションです。 |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
| Description | Message to be shown in the toast. This property accepts custom HTML as a string. Content is parsed as plaintext by default. innerHTMLTemplatesEnabled must be set to true in the Ionic config before custom HTML can be used. |
| Attribute | message |
| Type | IonicSafeString ｜ string ｜ undefined |
| Default | undefined |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | 画面上のトーストの位置です。 |
| Attribute | position |
| Type | "bottom" ｜ "middle" ｜ "top" |
| Default | 'bottom' |
| Description | If true, the toast will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter. |
| Attribute | translucent |
| Type | boolean |
| Default | false |
| Description | An ID corresponding to the trigger element that causes the toast to open when clicked. |
| Attribute | trigger |
| Type | string ｜ undefined |
| Default | undefined |
| Name | Description |
|---|
didDismiss | Emitted after the toast has dismissed. Shorthand for ionToastDidDismiss. |
didPresent | Emitted after the toast has presented. Shorthand for ionToastWillDismiss. |
ionToastDidDismiss | トーストが解散した後に発行されます。 |
ionToastDidPresent | トーストが提示された後に発します。 |
ionToastWillDismiss | 乾杯が解散する前に発します。 |
ionToastWillPresent | トーストが提示される前に発行されます。 |
willDismiss | Emitted before the toast has dismissed. Shorthand for ionToastWillDismiss. |
willPresent | Emitted before the toast has presented. Shorthand for ionToastWillPresent. |
| Description | トーストのオーバーレイが提示された後、それを解除します。 |
| Signature | dismiss(data?: any, role?: string) => Promise<boolean> |
| Description | トーストが解散したことを解決するPromiseを返します。 |
| Signature | onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| Description | トーストが解散するタイミングを解決するPromiseを返します。 |
| Signature | onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| Description | トーストのオーバーレイを作成した後に提示します。 |
| Signature | present() => Promise<void> |
| Name | Description |
|---|
button | トーストの内側に表示される任意のボタン要素。 |
container | すべての子要素を包む要素。 |
header | 乾杯のヘッダーテキストです。 |
icon | トーストの内容の横に表示されるアイコンです。 |
message | 乾杯の音頭の本文です。 |
| Name | Description |
|---|
--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 | トーストの幅 |
No slots available for this component.