element-plus/assets/en-US_component_dialog.md.7e7c7922.lean.js

import{_ as l,a as c,b as u,c as i,d as D,e as F,f as k,g as r}from"./chunks/nested-dialog.c6c2bdca.js";import{_ as d}from"./chunks/contributors.a7a66df9.js";import{c as g,a as n,w as e,u as o,b as a,d as s,e as E,r as A,o as m}from"./app.f4abc348.js";const h=a("h1",{id:"dialog",tabindex:"-1"},[s("Dialog "),a("a",{class:"header-anchor",href:"#dialog","aria-hidden":"true"},"#")],-1),b=a("p",null,"Informs users while preserving the current page state.",-1),f=a("h2",{id:"basic-usage",tabindex:"-1"},[s("Basic usage "),a("a",{class:"header-anchor",href:"#basic-usage","aria-hidden":"true"},"#")],-1),B=a("p",null,"Dialog pops up a dialog box, and it's quite customizable.",-1),y=a("p",null,"dialog/basic-usage",-1),v=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),_=a("h2",{id:"customized-content",tabindex:"-1"},[s("Customized Content "),a("a",{class:"header-anchor",href:"#customized-content","aria-hidden":"true"},"#")],-1),w=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),q=a("p",null,"dialog/customization-content",-1),V=a("h2",{id:"customized-header",tabindex:"-1"},[s("Customized Header "),a("a",{class:"header-anchor",href:"#customized-header","aria-hidden":"true"},"#")],-1),x=a("p",null,[s("The "),a("code",null,"header"),s(" slot can be used to customize the area where the title is displayed. In order to maintain accessibility, use the "),a("code",null,"title"),s(" attribute in addition to using this slot, or use the "),a("code",null,"titleId"),s(" slot property to specify which element should be read out as the dialog title.")],-1),T=a("p",null,"dialog/customization-header",-1),S=a("h2",{id:"nested-dialog",tabindex:"-1"},[s("Nested Dialog "),a("a",{class:"header-anchor",href:"#nested-dialog","aria-hidden":"true"},"#")],-1),N=a("p",null,[s("If a Dialog is nested in another Dialog, "),a("code",null,"append-to-body"),s(" is required.")],-1),z=a("p",null,"dialog/nested-dialog",-1),I=a("h2",{id:"centered-content",tabindex:"-1"},[s("Centered content "),a("a",{class:"header-anchor",href:"#centered-content","aria-hidden":"true"},"#")],-1),P=a("p",null,"Dialog's content can be centered.",-1),j=a("p",null,"dialog/centered-content",-1),J=E("",3),R=a("p",null,"dialog/destroy-on-close",-1),W=a("h2",{id:"draggable-dialog",tabindex:"-1"},[s("Draggable Dialog "),a("a",{class:"header-anchor",href:"#draggable-dialog","aria-hidden":"true"},"#")],-1),O=a("p",null,[s("Try to drag the "),a("code",null,"header"),s(" part.")],-1),M=a("p",null,"dialog/draggable-dialog",-1),L=E("",10),X='{"title":"Dialog","description":"","frontmatter":{"title":"Dialog","lang":"en-US"},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage"},{"level":2,"title":"Customized Content","slug":"customized-content"},{"level":2,"title":"Customized Header","slug":"customized-header"},{"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":1653302361000}',Z={},$=Object.assign(Z,{setup(U){const t={"../../examples/dialog/basic-usage.vue":l,"../../examples/dialog/centered-content.vue":c,"../../examples/dialog/customization-content.vue":u,"../../examples/dialog/customization-header.vue":i,"../../examples/dialog/destroy-on-close.vue":D,".