대화창 (Dialog)
v-dialog 컴포넌트는 사용자에게 해야할 특정 작업에 대해 알리고 중요한 정보를 포함하거나 결정을 내리거나 여러 작업을 포함 할 수 있습니다. 대화창은 방해적(interruptive) 이므로 자제해서 사용하세요.
사용법
A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.
API
Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.
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.
Components.Dialogs.
Disabled the ability to open the dialog
Specifies the modal to force 100% width
Changes layout for fullscreen display
Hide the display of the overlay
mounted에서 컨텐츠를 조건부로 렌더링. 컨첸츠가 활성화 되었을 경우에만 렌더링합니다.
Components.Dialogs.
The maximum width of the content
Components.Dialogs.
트랜지션 중심(origin)을 설정
Clicking outside will not dismiss the dialog
Components.Dialogs.
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
컴포넌트 트랜지션을 설정. 내장 트랜지션과 사용자 트랜지션 모두 가능
표시여부를 조절 (Controls visibility)
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.