대화창 (Dialog)

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

사용법

선택된 옵션을 바로 커밋(commit) 하고 메뉴를 닫습니다. 대화창의 바깥을 건드리거나 (touch) 뒤로가기(Back)을 누르면 액션을 취소하고 대화창을 닫습니다.


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
이름
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
이름
max-width
디폴트
none
타입
string | number

The maximum width of the content

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

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

이름
persistent
디폴트
false
타입
boolean

Clicking outside will not dismiss the dialog

이름
return-value
디폴트
undefined
타입
any
이름
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.