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.

    Ignite UI for Web Components Dialog Example

    En este ejemplo se muestra cómo crear un componente de diálogo en Web Components.

    Usage

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    import { defineComponents, IgcDialogComponent } from 'igniteui-webcomponents';

defineComponents(IgcDialogComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    La forma más sencilla de mostrar el componente de diálogo es usar sushow método y llamarlo con un clic de botón.

    <igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>

<igc-dialog id="dialog" title="Confirmation">
    <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
    <igc-button slot="footer" onclick="dialog.close()" variant="flat">Cancel</igc-button>
    <igc-button slot="footer" onclick="dialog.close()" variant="flat">OK</igc-button>
</igc-dialog>

    El componente Diálogo proporciona unaopen propiedad que te permite configurar su estado según el escenario de tu aplicación.

    Usa latitle propiedad para establecer el título del diálogo. Sin embargo, si se proporciona contenido en latitle ranura, tendrá prioridad sobre la propiedad.

    Los botones de acción o información adicional pueden colocarse en la parte inferior del diálogo a través de lafooter ranura. Si no se añade contenido allí, se mostrará un botón predeterminadoOK que cierra el diálogo al hacer clic. En caso de que no quieras que se muestre este botón, puedes poner lahideDefaultAction propiedad en verdadero. El valor por defecto es falso.

    Closing

    Por defecto, el diálogo se cierra automáticamente cuando el usuario pulsaESC. Podrías prevenir este comportamiento usando lakeepOpenOnEscape propiedad. El valor por defecto es falso. Si hay un desplegable abierto (o cualquier otro elemento que deba gestionarloESC internamente) en el diálogo, pulsarESC una vez cerrará el desplegable y volver a pulsarlo cerrará el diálogo.

    Usa lacloseOnOutsideClick propiedad para configurar si el diálogo debe cerrarse al hacer clic fuera de él. El valor por defecto es falso.

    Form

    Los elementos de formulario pueden cerrar un diálogo si tienen ese atributomethod="dialog". Enviar el formulario activará el cierre del diálogo.

    Styling

    ElIgcDialogComponent componente expone varias partes CSS para darte control total sobre su estilo:

    Nombre Descripción
    base El contenedor base del cuadro de diálogo.
    title El contenedor de títulos.
    footer El contenedor de pie de página.
    content El contenedor de contenido. 
    igc-dialog::part(content) {
  background: var(--ig-secondary-800);
  color: var(--ig-secondary-800-contrast);
}

igc-dialog::part(title),
igc-dialog::part(footer) {
  background: var(--ig-secondary-800);
  color: var(--ig-warn-500);
}

    API References

    Additional Resources