Dialog

v-dialogコンポーネントは、特定のタスクについてユーザに通知し、重要な情報を含んだり意思決定を必要とするような複数のタスクを伴う可能性があります。割り込み的な要素ですので、ダイアログは控えめに使用してください。

Usage

A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.

API

v-dialog
Name
attach
Default
false
Type
any

Components.Dialogs.

Name
content-class
Default
undefined
Type
any

Components.Dialogs.

Name
dark
Default
false
Type
boolean

Components.Dialogs.

Name
disabled
Default
false
Type
boolean

ダイアログを開く機能を無効にします。

Name
full-width
Default
false
Type
boolean

モーダルの幅が100%となるよう強制的に指定します。

Name
fullscreen
Default
false
Type
boolean

フルスクリーン表示になるようレイアウトを変更します。

Name
hide-overlay
Default
false
Type
boolean

前面以外の表示を隠します。Hide the display of the overlay

Name
lazy
Default
false
Type
boolean

Conditionally renders content on mounted. Will only render content if activated

Name
light
Default
false
Type
boolean

Components.Dialogs.

Name
max-width
Default
none
Type
string | number

コンテンツの最大幅を指定します。

Name
no-click-animation New in — v1.1
Default
false
Type
boolean

Components.Dialogs.

Name
origin
Default
'center center'
Type
string

Sets the transition origin

Name
persistent
Default
false
Type
boolean

ダイアログの外側をクリックしてもダイアログを消しません。

Name
return-value
Default
undefined
Type
any

Components.Dialogs.

Name
scrollable
Default
false
Type
boolean

trueを設定すると、 cardcard-titlecard-textcard-action が必要です。さらに、card-textの高さを設定する必要があります。 card-text は、スタイルの overflow-y を設定します。

Name
transition
Default
dialog-transition
Type
string | boolean

Components.Dialogs.

Name
value
Default
undefined
Type
any

Components.Dialogs.

Name
width
Default
auto
Type
string | number

ダイアログの幅を設定します。

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.

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.

Edit this page | language on Github