Descripción general del cuadro de diálogo Web Components
El componente Ignite UI for Web Components cuadro de diálogo se utiliza para mostrar cierta información o solicitar al usuario una acción o confirmación. Se muestra en una ventana modal, lo que significa que el usuario no puede interactuar con la aplicación principal hasta que se realice una determinada acción que cierre el cuadro de diálogo.
Ejemplo de diálogo Ignite UI for Web Components
En este ejemplo se muestra cómo crear un componente de diálogo en Web Components.
<html><head><title>Dialog Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-buttononclick="dialog.show()"variant="contained">Show Dialog</igc-button><igc-dialogid="dialog"title="Confirmation"><p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p><igc-buttonslot="footer"onclick="dialog.hide()"variant="flat">Cancel</igc-button><igc-buttonslot="footer"onclick="dialog.hide()"variant="flat">OK</igc-button></igc-dialog></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.
La forma más sencilla de mostrar el componente de diálogo es utilizar su método show y llamarlo al hacer clic en un botón.
<igc-buttononclick="dialog.show()"variant="contained">Show Dialog</igc-button><igc-dialogid="dialog"title="Confirmation"><p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p><igc-buttonslot="footer"onclick="dialog.close()"variant="flat">Cancel</igc-button><igc-buttonslot="footer"onclick="dialog.close()"variant="flat">OK</igc-button></igc-dialog>html
El componente Diálogo proporciona una propiedad open, que le brinda la posibilidad de configurar su estado según el escenario de su aplicación.
Utilice la propiedad title para establecer el título del diálogo. Sin embargo, si se proporciona algún contenido en el espacio title, tendrá prioridad sobre la propiedad.
Se pueden colocar botones de acción o información adicional en la parte inferior del cuadro de diálogo a través de la ranura del pie footer. Si no se agrega ningún contenido allí, se mostrará un botón OK predeterminado que cierra el cuadro de diálogo al hacer clic. En caso de que no desee que se muestre este botón, puede establecer la propiedad hideDefaultAction en verdadero. El valor predeterminado es falso.
Clausura
De forma predeterminada, el cuadro de diálogo se cierra automáticamente cuando el usuario presiona ESC. Puede evitar este comportamiento utilizando la propiedad keepOpenOnEscape. El valor predeterminado es falso. Si hay un menú desplegable abierto (o cualquier otro elemento que deba manejar ESC internamente) en el cuadro de diálogo, presionar ESC una vez cerrará el menú desplegable y presionarlo nuevamente cerrará el cuadro de diálogo.
Utilice la propiedad closeOnOutsideClick para configurar si el cuadro de diálogo debe cerrarse al hacer clic fuera de él. El valor predeterminado es falso.
<html><head><title>Dialog Closing Variations</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-switchid="keepOpenOnEscSwitch"label-position="before">keepOpenOnEscape</igc-switch><igc-switchid="closeOnOutsideClickSwitch"label-position="before">closeOnOutsideClick</igc-switch><igc-buttononclick="dialog.show()"variant="contained">Show Dialog</igc-button><igc-dialogid="dialog"title="Confirmation"><p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p><igc-buttonslot="footer"onclick="dialog.hide()"variant="flat">Cancel</igc-button><igc-buttonslot="footer"onclick="dialog.hide()"variant="flat">OK</igc-button></igc-dialog></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Forma
Los elementos del formulario pueden cerrar un cuadro de diálogo si tienen el atributo method="dialog". Al enviar el formulario se cerrará el cuadro de diálogo.
<html><head><title>Dialog Form</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-buttononclick="dialog.show()"variant="contained">Show Dialog</igc-button><igc-dialogid="dialog"title="Login"><formid="form"method="dialog"><igc-inputlabel="Username"><igc-iconname="username"slot="prefix"></igc-icon></igc-input><br><igc-inputtype="password"label="Password"><igc-iconname="password"slot="prefix"></igc-icon></igc-input><br><divstyle="display: flex; justify-content: flex-end;"><igc-buttontype="reset"variant="flat">Reset</igc-button><igc-buttontype="submit"variant="flat">Submit</igc-button></div></form><divslot="footer"><igc-button>Create an account</igc-button></div></igc-dialog></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Estilo
El componente de diálogo expone varias partes CSS (base, title, content y footer) para brindarle control total sobre su estilo.
<html><head><title>Dialog Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-buttononclick="dialog.show()"variant="contained">Show Dialog</igc-button><igc-dialogid="dialog"title="Confirmation"><h1slot="title">Styled Title</h1><p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p><igc-buttonslot="footer"onclick="dialog.toggle()"variant="flat">Cancel</igc-button><igc-buttonslot="footer"onclick="dialog.toggle()"variant="flat">OK</igc-button></igc-dialog></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html