メインコンテンツまでスキップ

スナックバー

概要​

スナックバーは、ユーザにメッセージを通知するコンポーネントです。画面下部に表示され、一定時間が経過すると自動的に消えます。

機能​

  • 指定されたメッセージを、画面下部に表示します。
  • 表示から一定時間が経過したら自動で閉じます。表示時間はデフォルトでは4秒です。ただし、スナックバーを表示する際に、表示時間の指定もできます。
  • 表示時間を過ぎていなくても、ユーザ操作によって閉じることもできます。
  • 任意の表示位置を指定できます。
  • 任意のスタイルを指定できます。
  • 任意のアクションを指定できます。アクションを指定すると、メッセージ横にボタンが表示されます。

画面レイアウト​

layout

画面項目​

表示項目​

番号名称項目種別取得元表示/活性条件
O1メッセージラベル-（※1）

（※1）プロパティ：messageで任意の文字列を指定できます。

操作項目​

番号名称項目種別操作種別表示/活性条件
T1アクションボタンボタンタッププロパティ：actionTextとactionHandlerが指定されている場合のみ表示

イベント定義​

ライフサイクル​

イベント処理概要
初期表示指定されたメッセージを表示します。一定時間を経過したら自動で閉じます。

ユーザ操作​

イベント処理概要
アクションボタンをタッププロパティ：actionHandlerで指定された処理を実行します。

プロパティ​

名称必須型説明
message○stringメッセージに表示する文字列
messageTextStyle-TextStyleメッセージに表示する文字列のスタイル
style-ViewStyleスナックバーの見た目を調整するスタイル
positionStyle-ViewStyleスナックバーの位置を調整するスタイル
actionText-stringアクションボタンに表示する文字列
actionHandler-functionアクションボタンタップ時の処理
actionTextStyle-TextStyleアクションボタンに表示する文字列のスタイル
autoHideDuration-number表示してから自動で閉じるまでの時間（ミリ秒）
デフォルトは4000ms
fadeInDuration-number表示する際のフェードイン演出の時間（ミリ秒）
デフォルトは1000ms
fadeOutDuration-number自動で閉じる際のフェードアウト演出の時間（ミリ秒）
デフォルトは1000ms
forceFadeOutDuration-number新しくスナックバーを表示する際に、先に表示していたスナックバーを閉じるフェードアウト演出の時間（ミリ秒）
デフォルトは300ms
hideFadeOutDuration-number後述のhide関数がコールされた際のフェードアウト演出の時間（ミリ秒）
デフォルトは300ms

関数​

関数名指定可能なプロパティ説明
showプロパティから以下を除外したもの
・ hideFadeOutDuration		スナックバーを表示する
showWithCloseButtonプロパティから以下を除外したもの
・ actionText
・ actionHandler
・ actionTextStyle
・ hideFadeOutDuration		スナックバーを「閉じる」ボタン付きで表示する
hidehideFadeOutDuration のみスナックバーを非表示にする

スナックバーの複数表示について​

  • 複数のスナックバーを同時に表示できません。
  • スナックバー表示中に新たなスナックバーを表示する場合、表示中のスナックバーをフェードアウトしてから新しいスナックバーを表示します。
    • この場合、先に表示していたスナックバーは表示時間を経過していなくてもフェードアウトします。
に最終更新