import{_asl,aasc,basu,casi,dasD,easF,fasr,gask}from"./chunks/nested-dialog.03f49bb0.js";import{_asd}from"./chunks/contributors.b2e79e9b.js";import{casg,aasn,wase,uaso,basa,dass,easE,rasA,oasm}from"./app.c3571ef0.js";constb=a("h1",{id:"dialog",tabindex:"-1"},[s("Dialog "),a("a",{class:"header-anchor",href:"#dialog","aria-hidden":"true"},"#")],-1),h=a("p",null,"Informa a usuarios preservando el estado de la p\xE1gina actual.",-1),f=a("h2",{id:"uso-basico",tabindex:"-1"},[s("Uso b\xE1sico "),a("a",{class:"header-anchor",href:"#uso-basico","aria-hidden":"true"},"#")],-1),B=a("p",null,"Dialog abre una caja de di\xE1logo, y es bastante personalizable.",-1),v=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(" solo funciona cuando el usuario hace clic en el icono de cerrar o en el backdrop. Si tiene botones que cierran el di\xE1logo en el slot con nombre "),a("code",null,"footer"),s(", puede a\xF1adir lo que se deber\xEDa hacer con "),a("code",null,"before-close"),s(" en el manejador de eventos de clic de los botones.")])],-1),_=a("h2",{id:"contenido-personalizado",tabindex:"-1"},[s("Contenido personalizado "),a("a",{class:"header-anchor",href:"#contenido-personalizado","aria-hidden":"true"},"#")],-1),q=a("p",null,"El contenido del Di\xE1logo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra c\xF3mo usar Element Plus Table y Form con Dialog",-1),w=a("p",null,"dialog/customization-content",-1),V=a("h2",{id:"cabecera-personalizada",tabindex:"-1"},[s("Cabecera personalizada "),a("a",{class:"header-anchor",href:"#cabecera-personalizada","aria-hidden":"true"},"#")],-1),x=a("p",null,[s("El slot "),a("code",null,"header"),s(" se puede utilizar para personalizar el \xE1rea donde se muestra el t\xEDtulo. Para mantener la accesibilidad, utilice el atributo "),a("code",null,"title"),s(" cuando use el slot, o utilice la propiedad "),a("code",null,"titleId"),s(" para especificar qu\xE9 elemento debe ser le\xEDdo como el t\xEDtulo del di\xE1logo.")],-1),z=a("p",null,"dialog/customization-header",-1),T=a("h2",{id:"dialogo-anidado",tabindex:"-1"},[s("Di\xE1logo anidado "),a("a",{class:"header-anchor",href:"#dialogo-anidado","aria-hidden":"true"},"#")],-1),S=a("p",null,[s("Si un Di\xE1logo est\xE1 anidado en otro Di\xE1logo, se requiere "),a("code",null,"append-to-body"),s(".")],-1),N=a("p",null,"dialog/nested-dialog",-1),P=a("h2",{id:"contenido-centrado",tabindex:"-1"},[s("Contenido centrado "),a("a",{class:"header-anchor",href:"#contenido-centrado","aria-hidden":"true"},"#")],-1),j=a("p",null,"El contenido del di\xE1logo se puede centrar.",-1),I=a("p",null,"dialog/centered-content",-1),J=E('<div class="tip custom-block"><p class="custom-block-title">TIP</p><p>El contenido del Di\xE1logo se muestra perezosamente, lo que significa que el slot por defecto se renderiza en el DOM despu\xE9s de que se abra. Por lo tanto, si necesita realizar una manipulaci\xF3n DOM o acceder a un componente usando <code>ref</code>, h\xE1galo en el callback del evento <code>open</code>.</p></div><h2 id="destruir-al-cerrar" tabindex="-1">Destruir al cerrar <a class="header-anchor" href="#destruir-al-cerrar" aria-hidden="true">#</a></h2><p>Cuando esta caracter\xEDstica est\xE1 activada, el contenido en el slot predeterminado se destruir\xE1 con una directiva <code>v-if</code>. Habilite esto cuando tenga problemas de rendimiento.</p>',3),R=a("p",null,"dialog/destroy-on-close",-1),O=a("h2",{id:"dialogo-arrastrable",tabindex:"-1"},[s("Di\xE1logo arrastrable "),a("a",{class:"header-anchor",href:"#dialogo-arrastrable","aria-hidden":"true"},"#")],-1),W=a("p",null,[s("Intento de arrastre para la parte del "),a("code",null,"header"),s(".")],-1),M=a("p",null,"dialog/draggable-dialog",-1),L=E('<divclass="tip custom-block"><pclass="custom-block-title">TIP</p><p>Cuandoseusa<code>modal</code>=false,porfavoraseg\xFAresedeque<code>append-to-body</code>seestableci\xF3a<strong>true</strong>,
