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.

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrDialog, IgrButtonModule, IgrDialogModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();
IgrDialogModule.register();

export default class DialogOverview extends React.Component<any, any> {

    public dialogRef: IgrDialog;

    constructor(props: any) {
        super(props);
        this.onDialogRef = this.onDialogRef.bind(this);
        this.onDialogShow = this.onDialogShow.bind(this);
        this.onDialogHide = this.onDialogHide.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrButton variant="contained" clicked={this.onDialogShow}>
                    <span>Show Dialog</span>
                </IgrButton>

                <IgrDialog title="Confirmation" ref={this.onDialogRef}>
                    <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
                    <div slot="footer">
                        <IgrButton clicked={this.onDialogHide} variant="flat"><span>Cancel</span></IgrButton>
                        <IgrButton clicked={this.onDialogHide} variant="flat"><span>OK</span></IgrButton>
                    </div>
                </IgrDialog>
            </div>
        );
    }

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

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

    public onDialogHide() {
        if(this.dialogRef){
            this.dialogRef.hide();
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DialogOverview/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

Usage

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

npm install igniteui-react
cmd

A continuación, deberá importar el React IgrDialog, su CSS necesario, y registrar su módulo, de la siguiente manera:

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

IgrDialogModule.register();
tsx

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

<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();
    }
}
tsx

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.

Closing

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.

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrDialog, IgrSwitch, IgrButtonModule, IgrDialogModule, IgrSwitchModule  } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();
IgrDialogModule.register();
IgrSwitchModule.register();

export default class DialogClosingVariations extends React.Component<any, any> {

    public dialogRef: IgrDialog;

    constructor(props: any) {
        super(props);
        this.onDialogRef = this.onDialogRef.bind(this);
        this.onDialogShow = this.onDialogShow.bind(this);
        this.onDialogHide = this.onDialogHide.bind(this);
        this.onSwitchChangeEscape = this.onSwitchChangeEscape.bind(this);
        this.onSwitchChangeClick = this.onSwitchChangeClick.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrSwitch labelPosition="Before" change={this.onSwitchChangeEscape}><span>keepOpenOnEscape</span></IgrSwitch>
                <IgrSwitch labelPosition="Before" change={this.onSwitchChangeClick}><span>closeOnOutsideClick</span></IgrSwitch>

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

                <IgrDialog title="Confirmation" ref={this.onDialogRef}>
                    <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
                    <div slot="footer">
                        <IgrButton clicked={this.onDialogHide} variant="flat"><span>Cancel</span></IgrButton>
                        <IgrButton clicked={this.onDialogHide} variant="flat"><span>OK</span></IgrButton>
                    </div>
                </IgrDialog>
            </div>
        );
    }

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

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

    public onDialogHide() {
        if(this.dialogRef){
            this.dialogRef.hide();
        }
    }

    public onSwitchChangeEscape(e: any) {
        this.dialogRef.keepOpenOnEscape = e.checked;
    }

    public onSwitchChangeClick(e: any) {
        this.dialogRef.closeOnOutsideClick = e.checked;
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DialogClosingVariations/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Form

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.

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrDialog, IgrInput, IgrIcon, IgrButtonModule, IgrDialogModule, IgrInputModule, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();
IgrDialogModule.register();
IgrInputModule.register();
IgrIconModule.register();

export default class DialogForm extends React.Component<any, any> {

    public dialogRef: IgrDialog;
    public passwordIcon: IgrIcon;
    public usernameIcon: IgrIcon;

    constructor(props: any) {
        super(props);
        this.onDialogRef = this.onDialogRef.bind(this);
        this.onDialogShow = this.onDialogShow.bind(this);
        this.iconPasswordRef = this.iconPasswordRef.bind(this); 
        this.iconUsernameRef = this.iconUsernameRef.bind(this); 
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrButton variant="contained" clicked={this.onDialogShow}>
                    <span>Show Dialog</span>
                </IgrButton>

                <IgrDialog title="Login" ref={this.onDialogRef}>
                    <form>
                        <IgrInput label="Username">
                            <span slot="prefix">
                                <IgrIcon ref={this.iconUsernameRef} name="username" collection="material"/>
                            </span>
                        </IgrInput>
                        <br />
                        <IgrInput type="password" label="Password">
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPasswordRef} name="password" collection="material"/>
                            </span>
                        </IgrInput>
                        <br />
                        <div style={{display: "flex", justifyContent: "flex-end"}}>
                            <IgrButton type="reset" variant="flat"><span>Reset</span></IgrButton>
                            <IgrButton type="submit" variant="flat"><span>Submit</span></IgrButton>
                        </div>
                    </form>


                    <div slot="footer">
                        <IgrButton><span>Create an account</span></IgrButton>
                    </div>
                </IgrDialog>
            </div>
        );
    }

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

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

    public iconUsernameRef(icon: IgrIcon){
        if (!icon) { return; }
        this.usernameIcon = icon;
        const usernameIconText = '<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.71,12.71a6,6,0,1,0-7.42,0,10,10,0,0,0-6.22,8.18,1,1,0,0,0,2,.22,8,8,0,0,1,15.9,0,1,1,0,0,0,1,.89h.11a1,1,0,0,0,.88-1.1A10,10,0,0,0,15.71,12.71ZM12,12a4,4,0,1,1,4-4A4,4,0,0,1,12,12Z"/></svg>';
        this.usernameIcon.registerIconFromText("username", usernameIconText, "material");
    }

    public iconPasswordRef(icon: IgrIcon){
        if (!icon) { return; }
        this.passwordIcon = icon;
        const passwordIconText = '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.0151 13.6556C14.8093 14.3587 16.9279 13.9853 18.3777 12.5355C20.3304 10.5829 20.3304 7.41709 18.3777 5.46447C16.4251 3.51184 13.2593 3.51184 11.3067 5.46447C9.85687 6.91426 9.48353 9.03288 10.1866 10.8271M12.9964 13.6742L6.82843 19.8422L4.2357 19.6065L4 17.0138L10.168 10.8458M15.5493 8.31568V8.29289" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
        this.passwordIcon.registerIconFromText("password", passwordIconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DialogForm/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Styling

El IgrDialog componente expone varias partes CSS para darle 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);
}
css

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrDialog, IgrButtonModule, IgrDialogModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();
IgrDialogModule.register();

export default class DialogStyling extends React.Component<any, any> {

    public dialogRef: IgrDialog;

    constructor(props: any) {
        super(props);
        this.onDialogRef = this.onDialogRef.bind(this);
        this.onDialogShow = this.onDialogShow.bind(this);
        this.onDialogHide = this.onDialogHide.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrButton variant="contained" clicked={this.onDialogShow}>
                    <span>Show Dialog</span>
                </IgrButton>

                <IgrDialog title="Confirmation" ref={this.onDialogRef}>
                    <h1 slot="title">Styled Title</h1>
                    <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
                    <div slot="footer">
                        <IgrButton clicked={this.onDialogHide} variant="flat"><span>Cancel</span></IgrButton>
                        <IgrButton clicked={this.onDialogHide} variant="flat"><span>OK</span></IgrButton>
                    </div>
                </IgrDialog>
            </div>
        );
    }

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

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

    public onDialogHide() {
        if(this.dialogRef){
            this.dialogRef.hide();
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DialogStyling/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

igc-dialog::part(content) {
    background: #011627;
    color: white;
}

igc-dialog::part(title),
igc-dialog::part(footer) {
    background: #011627;
    color: #ECAA53;
}cssコピー

Edit in: Codesandbox

API References

• keepOpenOnEscape
• closeOnOutsideClick
• hide
• hideDefaultAction
• open
• title
• IgrDialog
• Styling & Themes

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub