Componente modal del diseño de la hormiga de la interfaz de usuario de ReactJS

. Componente modal Podemos usar el siguiente enfoque en ReactJS para usar el componente modal de Ant Design.

Accesorios modales:

• afterClose : se utiliza para especificar una función que se activará cuando el modal se cierre por completo.
• bodyStyle: se utiliza para indicar el estilo del cuerpo del elemento de cuerpo modal.
• cancelButtonProps: se utiliza para indicar los accesorios del botón cancelar.
• cancelText: se utiliza para indicar el texto del botón Cancelar.
• centrado: Se utiliza para hacer el Modal Centrado.
• cerrable: se utiliza para indicar si un botón de cierre está visible en la parte superior derecha del cuadro de diálogo modal o no.
• closeIcon: Se utiliza para el icono de cierre personalizado.
• confirmLoading: Se utiliza para indicar si aplicar o no el efecto visual de carga para el botón OK.
• destroyOnClose: se utiliza para indicar si se desmontan los componentes secundarios en onClose.
• focusTriggerAfterClose: indica si necesita enfocar el elemento disparador después de cerrar el diálogo o no.
• pie de página: Se utiliza para definir el contenido del pie de página.
• forceRender: Se utiliza para forzar el renderizado del Modal.
• getContainer: esta función se usa para devolver el Node de montaje para Modal.
• teclado: Se utiliza para indicar si se debe o no presionar ESC para cerrar.
• máscara: Se utiliza para indicar si mostrar máscara o no.
• maskClosable: se utiliza para indicar si cerrar el diálogo modal cuando se hace clic en la máscara o no.
• maskStyle: se utiliza para definir el estilo del elemento de máscara de modal.
• modalRender: se utiliza para la representación de contenido modal personalizado.
• okButtonProps: se utiliza para definir los accesorios del botón ok.
• okText: se utiliza para indicar el texto del botón Aceptar.
• okType: Se utiliza para definir el tipo de Botón del botón Aceptar.
• style: Se utiliza para el estilo de capa flotante.
• title: Se utiliza para definir el título del diálogo modal.
• visible: Se utiliza para indicar si el diálogo modal está visible o no.
• ancho: se utiliza para indicar el ancho del cuadro de diálogo modal.
• wrapClassName: se utiliza para pasar el nombre de la clase del contenedor del diálogo modal.
• zIndex: se utiliza para indicar el índice z del Modal.
• onCancel: esta función se activará cuando un usuario haga clic en el botón de máscara, cerrar o cancelar.
• onOk: esta función se activará cuando un usuario haga clic en el botón Aceptar.

Métodos modales:

• destroyAll(): Este método se utiliza para
• useModal(): este método se usa para devolver un contextHolder para insertarlo en los elementos secundarios cuando usa Context.
• info(): Este método se utiliza para manejar la información.
• éxito(): este método se utiliza para manejar el éxito.
• error(): este método se utiliza para manejar el error.
• advertencia(): este método se utiliza para manejar la advertencia.
• confirm(): este método se utiliza para manejar la confirmación.

Accesorios de objeto de método modal:

• afterClose : se utiliza para especificar una función que se activará cuando el modal se cierre por completo.
• autoFocusButton: se utiliza para especificar qué botón enfocar automáticamente.
• bodyStyle: se utiliza para indicar el estilo del cuerpo del elemento de cuerpo modal.
• cancelButtonProps: se utiliza para indicar los accesorios del botón cancelar.
• cancelText: se utiliza para indicar el texto del botón Cancelar.
• centrado: Se utiliza para hacer el Modal Centrado.
• className: se utiliza para pasar el className del contenedor.
• cerrable: se utiliza para indicar si un botón de cierre está visible en la parte superior derecha del cuadro de diálogo modal o no.
• closeIcon: Se utiliza para el icono de cierre personalizado.
• contenido: Se utiliza para definir el Contenido.
• getContainer: esta función se usa para devolver el Node de montaje para Modal.
• icon: Se utiliza para el icono personalizado.
• teclado: Se utiliza para indicar si se debe o no presionar ESC para cerrar.
• máscara: Se utiliza para indicar si mostrar máscara o no.
• maskClosable: se utiliza para indicar si cerrar el diálogo modal cuando se hace clic en la máscara o no.
• maskStyle: se utiliza para definir el estilo del elemento de máscara de modal.
• okButtonProps: se utiliza para definir los accesorios del botón ok.
• okText: se utiliza para indicar el texto del botón Aceptar.
• okType: Se utiliza para definir el tipo de Botón del botón Aceptar.
• style: Se utiliza para el estilo de capa flotante.
• title: Se utiliza para definir el título del diálogo modal.
• ancho: se utiliza para indicar el ancho del cuadro de diálogo modal.
• zIndex: se utiliza para indicar el índice z del Modal.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { useState } from 'react';
import "antd/dist/antd.css";
import { Modal, Button } from 'antd';
  
export default function App() {
  
  const [isModalVisible, setIsModalVisible] = useState(false);
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Modal Component</h4>
      <>
        <Button type="secondary" onClick={() => {
          setIsModalVisible(true);
        }}>
          Click to open Modal
      </Button>
        <Modal title="Modal Title"
          visible={isModalVisible}
          onOk={() => {
            setIsModalVisible(false);
          }}
          onCancel={() => {
            setIsModalVisible(false);
          }}>
          <p>Sample Modal contents</p>
  
        </Modal>
      </>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://ant.design/components/modal/