v-snackbarコンポーネントは、簡単なメッセージを通知するために使用されます。スナックバーは、位置決め、遅延消去、およびコールバックをサポートしています。
確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。
コンポーネントに position: absolute を適用します。
Respects boundaries of—and will not overlap with—other app components like v-app-bar, v-navigation-drawer, and v-footer.
コンポーネントを下部に配置します。
Positions the snackbar in the center of the screen, (x and y axis).
指定された色をコントロールに適用します。利用できるのは色の名前 (たとえば、success または purple) または css 表記の色 (#033またはrgba(255, 0, 0, 0.5)) です。colors のページ で、組み込みクラスのリストが確認できます。
Apply a custom class to the snackbar content
コンポーネントにダークテーマを適応します。詳しく知りたい場合は、Material Design documentationのdark themesを参照してください。
コンポーネントに適用される高さを0〜24の範囲で指定します。詳細は、elevation のページで確認できます。
コンポーネントに高さを設定します。
コンポーネントを左に配置します。
コンポーネントにlightテーマを適用します。
コンテンツの高さの最大値を設定します。
コンテンツの横幅の最大値を設定します。
コンテンツの高さの最小値を設定します。
コンテンツの横幅の最小値を設定します。
Gives the snackbar a larger minimum height.
Removes elevation (box-shadow) and adds a thin border.
コンポーネントを右に配置します。
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Applies a large border radius on the top left and bottom right of the card.
コンポーネント内で使用するカスタムタグを指定します。
定義されたcolorをテキストに適用し、同じ色の低い不透明度の背景を適用します。
Removes the component's border-radius.
スナックバーが自動的に非表示になるまでの時間（ミリ秒）。 0を指定すると開いたままになります。
コンポーネントを上部に配置します。
コンポーネントのトランジションを設定します。 組み込みトランジション のいずれか、または独自のものを使用できます。
コンポーネントを表示するか非表示にするかを制御します。
Stacks snackbar content on top of the actions (button).
コンポーネントに横幅を設定します。
Used to bind styles to v-btn to match MD2 specification.
{
attrs: object
}デフォルトの Vue slot
更新されたバウンドモデル
boolean1 !default;8px !default;#333333 !default;$border-radius-root !default;0 !default;0 !default;0 8px !default;hsla(0, 0%, 100%, .87) !default;0 !default;map-deep-get($headings, 'body-2', 'size') !default;map-deep-get($headings, 'body-2', 'weight') !default;map-deep-get($headings, 'body-2', 'letter-spacing') !default;map-deep-get($headings, 'body-2', 'line-height') !default;14px 16px !default;map-deep-get($headings, 'body-2', 'text-transform') !default;0 !default;6 !default;$snackbar-content-font-size !default;0 !default;68px !default;0 !default;map-get($rounded, 'xl') $snackbar-border-radius !default;0 !default;.8 !default;8px !default;0 !default;initial !default;8px !default;$snackbar-content-max-width !default;48px !default;$snackbar-content-min-width !default;0 !default;1000 !default;以下に、簡単な例から複雑な例まで示します。
The multi-line property extends the height of the v-snackbar to give you a little more room for content.
timeoutプロパティを使用すると、v-snackbarが非表示になるまでの遅延をカスタマイズできます。
verticalプロパティを使用すると、v-snackbar内のコンテンツを積み重ねることができます。
Apply different styles to the snackbar using props such as text, shaped, outlined, and more.