element-plus/assets/en-US_component_dialog.md.81affec6.lean.js

import{_ as c,a as u,b as i,c as D,d as F,e as k,f as r}from"./chunks/nested-dialog.5c10ba18.js";import{c as d,a as n,w as e,u as o,b as a,d as s,e as C,r as E,o as g}from"./app.fbbef7af.js";const A=a("h1",{id:"dialog",tabindex:"-1"},[s("Dialog "),a("a",{class:"header-anchor",href:"#dialog","aria-hidden":"true"},"#")],-1),m=a("p",null,"Informs users while preserving the current page state.",-1),b=a("h2",{id:"basic-usage",tabindex:"-1"},[s("Basic usage "),a("a",{class:"header-anchor",href:"#basic-usage","aria-hidden":"true"},"#")],-1),h=a("p",null,"Dialog pops up a dialog box, and it's quite customizable.",-1),f=a("p",null,"dialog/basic-usage",-1),y=a("div",{class:"tip custom-block"},[a("p",{class:"custom-block-title"},"TIP"),a("p",null,[a("code",null,"before-close"),s(" only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the "),a("code",null,"footer"),s(" named slot, you can add what you would do with "),a("code",null,"before-close"),s(" in the buttons' click event handler.")])],-1),B=a("h2",{id:"customizations",tabindex:"-1"},[s("Customizations "),a("a",{class:"header-anchor",href:"#customizations","aria-hidden":"true"},"#")],-1),v=a("p",null,"The content of Dialog can be anything, even a table or a form. This example shows how to use Element Plus Table and Form with Dialog\u3002",-1),_=a("p",null,"dialog/customizations",-1),w=a("h2",{id:"nested-dialog",tabindex:"-1"},[s("Nested Dialog "),a("a",{class:"header-anchor",href:"#nested-dialog","aria-hidden":"true"},"#")],-1),q=a("p",null,[s("If a Dialog is nested in another Dialog, "),a("code",null,"append-to-body"),s(" is required.")],-1),V=a("p",null,"dialog/nested-dialog",-1),x=a("h2",{id:"centered-content",tabindex:"-1"},[s("Centered content "),a("a",{class:"header-anchor",href:"#centered-content","aria-hidden":"true"},"#")],-1),T=a("p",null,"Dialog's content can be centered.",-1),S=a("p",null,"dialog/centered-content",-1),N=C("",3),P=a("p",null,"dialog/destroy-on-close",-1),I=a("h2",{id:"draggable-dialog",tabindex:"-1"},[s("Draggable Dialog "),a("a",{class:"header-anchor",href:"#draggable-dialog","aria-hidden":"true"},"#")],-1),j=a("p",null,[s("Try to drag the "),a("code",null,"header"),s(" part.")],-1),J=a("p",null,"dialog/draggable-dialog",-1),z=C("",10),U='{"title":"Dialog","description":"","frontmatter":{"title":"Dialog","lang":"en-US"},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage"},{"level":2,"title":"Customizations","slug":"customizations"},{"level":2,"title":"Nested Dialog","slug":"nested-dialog"},{"level":2,"title":"Centered content","slug":"centered-content"},{"level":2,"title":"Destroy on Close","slug":"destroy-on-close"},{"level":2,"title":"Draggable Dialog","slug":"draggable-dialog"},{"level":2,"title":"Attributes","slug":"attributes"},{"level":2,"title":"Slots","slug":"slots"},{"level":2,"title":"Events","slug":"events"},{"level":2,"title":"Source","slug":"source"},{"level":2,"title":"Contributors","slug":"contributors"}],"relativePath":"en-US/component/dialog.md","lastUpdated":1649647212000}',R={},Y=Object.assign(R,{setup(W){const t={"../../examples/dialog/basic-usage.vue":c,"../../examples/dialog/centered-content.vue":u,"../../examples/dialog/customizations.vue":i,"../../examples/dialog/destroy-on-close.vue":D,"../../examples/dialog/draggable-dialog.vue":F,"../../examples/dialog/focus-trapping.vue":k,"../../examples/dialog/nested-dialog.vue":r};return(M,L)=>{const p=E("Demo"),l=E("Contributors");return g(),d("div",null,[A,m,b,h,n(p,{demos:o(t),source:"%3Cpre%20v-pre%3E%3Ccode%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Etemplate%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%20%20%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Eel-button%3C%2Fspan%3E%20%3Cspan%20class%3D%22token%20attr-name%22%3Etype%3C%2Fspan%3E%3Cspan%20class%3D%22token%20attr-valu