Dialog
v-dialogコンポーネントは、特定のタスクについてユーザに通知し、重要な情報を含んだり意思決定を必要とするような複数のタスクを伴う可能性があります。割り込み的な要素ですので、ダイアログは控えめに使用してください。
Usage
A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.
API
Components.Dialogs.
Components.Dialogs.
Components.Dialogs.
ダイアログを開く機能を無効にします。
モーダルの幅が100%となるよう強制的に指定します。
フルスクリーン表示になるようレイアウトを変更します。
前面以外の表示を隠します。Hide the display of the overlay
Conditionally renders content on mounted. Will only render content if activated
Components.Dialogs.
コンテンツの最大幅を指定します。
Components.Dialogs.
Sets the transition origin
ダイアログの外側をクリックしてもダイアログを消しません。
Components.Dialogs.
trueを設定すると、 card 、 card-title 、 card-text 、 card-action が必要です。さらに、card-textの高さを設定する必要があります。 card-text は、スタイルの overflow-y を設定します。
Components.Dialogs.
Components.Dialogs.
ダイアログの幅を設定します。
Examples
Without activator
If for some reason you are unable to use the activator slot, be sure to add the .stop modifier to the event that triggers the dialog.
Modal
Similar to a Simple Dialog, except that it's not dismissed when touching outside.
Fullscreen
Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.
Form
Just a simple example of a form in a dialog.
Scrollable
Example of a dialog with scrollable content.
Overflowed
Modals that do not fit within the available window space will scroll the container.
Simple dialogs
Choosing an option immediately closes the menu. Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog.
Loader
The v-dialog component makes it easy to create a customized loading experience for your application.