Descripción general del cuadro de diálogo React

    El componente Ignite UI for React 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 React Dialog Example

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

    Usage

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego tendrás que importar el ReactIgrDialog y su CSS necesario, así:

    import { IgrDialog } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Para una introducción completa al Ignite UI for React, 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.

    <IgrButton variant="contained" clicked={this.onDialogShow}>
    <span>Show Dialog</span>
</IgrButton>

<IgrDialog ref={this.onDialogRef}>
    <span>Dialog Message</span>
</IgrDialog>

public onDialogRef(dialog: IgrDialog) {
    if (!dialog) { return; }
    this.dialogRef = dialog;
}

public onDialogShow() {
    if (this.dialogRef) {
        this.dialogRef.show();
    }
}

    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

    ElIgrDialog 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