대화창 (Dialog)

v-dialog 컴포넌트는 사용자에게 해야할 특정 작업에 대해 알리고 중요한 정보를 포함하거나 결정을 내리거나 여러 작업을 포함 할 수 있습니다. 대화창은 방해적(interruptive) 이므로 자제해서 사용하세요.

사용법

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

API

v-dialog
이름
attach
디폴트
false
타입
any

Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.

이름
content-class
디폴트
undefined
타입
any

Applies a custom class to the detached element. This is useful because the content is moved to the end of the app and is not targettable by classes passed directly on the component.

이름
dark
디폴트
false
타입
boolean

Components.Dialogs.

이름
disabled
디폴트
false
타입
boolean

Disabled the ability to open the dialog

이름
full-width
디폴트
false
타입
boolean

Specifies the modal to force 100% width

이름
fullscreen
디폴트
false
타입
boolean

Changes layout for fullscreen display

이름
hide-overlay
디폴트
false
타입
boolean

Hide the display of the overlay

이름
lazy
디폴트
false
타입
boolean

mounted에서 컨텐츠를 조건부로 렌더링. 컨첸츠가 활성화 되었을 경우에만 렌더링합니다.

이름
light
디폴트
false
타입
boolean

Components.Dialogs.

이름
max-width
디폴트
none
타입
string | number

The maximum width of the content

이름
no-click-animation New in — v1.1
디폴트
false
타입
boolean

Components.Dialogs.

이름
origin
디폴트
'center center'
타입
string

트랜지션 중심(origin)을 설정

이름
persistent
디폴트
false
타입
boolean

Clicking outside will not dismiss the dialog

이름
return-value
디폴트
undefined
타입
any

Components.Dialogs.

이름
scrollable
디폴트
false
타입
boolean

When set to true, expects a card, card-title, card-text and card-actions. Additionally card-text should have specified height. Will set card-text to overflow-y

이름
transition
디폴트
dialog-transition
타입
string | boolean

컴포넌트 트랜지션을 설정. 내장 트랜지션과 사용자 트랜지션 모두 가능

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

이름
width
디폴트
auto
타입
string | number

Sets the dialog width

예제

Without activator

어떤 이유로 activator 슬롯을 사용할 수 없을 경우, 선택창을 활성화하는 이벤트에 .stop 수식어(modifier)를 사용했는지 확인하세요(사용해야한다는 의미).

모달 (Modal)

바깥 부분을 건드려도 닫히지 않는 다는 점을 제외하면 간단한 대화창(Simple Dialog)과 비슷합니다.

전체화면 (Fullscreen)

모바일 장치에서 공간이 부족할 경우 큰 화면을 가진 장치에서 쓰는 일반 대화창 보다 전체화면 대화창이 더 적당할 수도 있습니다.

폼 (Form)

대화창내의 간단한 폼 예제.

스크롤 (Scrollable)

스크롤 되는 컨텐츠를 가진 대화창 예제

오버플로우 (Overflowed)

모달이 화면 크기에 맞지 않으면 컨텐츠를 스크롤할 수 있습니다..

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
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore