私のブックマーク
ブックマークを追加
ブックマークを削除デザインガイドライン
スナックバーは、短いメッセージを表示し、小さな遅延の後に消去されます。また、ユーザーにオプションを提供することもできます。たとえば、公開された投稿を表示することですが、これらのオプションはUIの他の場所でも利用可能であるべきです。
開発ガイドライン
使用法
プレーンなスナックバーを表示するには、メッセージを children プロパティとして渡します:
const MySnackbarNotice = () => (<Snackbar>Post published successfully.</Snackbar>);
より複雑なマークアップの場合は、任意のJSX要素を渡すことができます:
const MySnackbarNotice = () => (<Snackbar><p>An error occurred: <code>{ errorDetails }</code>.</p></Snackbar>);
プロパティ
以下のプロパティは、コンポーネントの表示を制御するために使用されます。
actions: NoticeAction[]
アクションオブジェクトの配列です。各メンバーオブジェクトは、label と、url リンク文字列または onClick コールバック関数のいずれかを含む必要があります。
- 必須: いいえ
- デフォルト:
[]
children: string
通知の表示メッセージです。また、代替メッセージとして spokenMessage が提供されない限り、支援技術のための音声メッセージとしても使用されます。
- 必須: はい
explicitDismiss: boolean
スナックバーを閉じるためにユーザーのアクションを必要とするかどうかを示します。デフォルトでは、ユーザーの操作なしでタイムアウトで閉じられます。
- 必須: いいえ
- デフォルト:
false
icon: ReactNode
スナックバーに表示するアイコンです。
- 必須: いいえ
- デフォルト:
null
listRef: MutableRefObject< HTMLDivElement | null >
スナックバーを含むリストへの参照です。
- 必須: いいえ
onDismiss: () => void
スナックバーが閉じられたときに実行されるコールバックです。これは、UIからスナックバーを削除するために呼び出す関数である onRemove とは異なります。
- 必須: いいえ
onRemove: () => void
通知を閉じるときに呼び出される関数です。
- 必須: いいえ
politeness: ‘polite’ | ‘assertive’
通知の音声メッセージの丁寧さのレベルです。aria-live 属性値の有効なオプションの1つとして提供されるべきです。この値は提案として考慮されるべきであり、支援技術は内部のヒューリスティックに基づいてこれを上書きする場合があります。
'assertive' の値は、重要で通常は時間に敏感な情報に使用されます。この値は、その瞬間に画面リーダーが発表している他のすべてを中断します。
'polite' の値は、助言情報に使用されます。この値は、その瞬間に画面リーダーが発表している内容（「スピーチキュー」）を中断したり、現在のタスクを中断したりしてはいけません。
- 必須: いいえ
- デフォルト:
'polite'
spokenMessage: string
カスタム音声メッセージを提供するために使用されます。
関連コンポーネント
- より高いレベルの注意を必要とする目立つメッセージを作成するには、Noticeを使用してください。
