Accesorios de React Suite <Modal.Title>

React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. Los componentes modales se utilizan para crear cuadros de diálogo, cajas de luz, ventanas emergentes, etc.

Un componente modal tiene tres áreas distintas: un título o un encabezado, el cuerpo y un pie de página. En este artículo, veremos la parte del título.

El componente <Modal.Title> se utiliza para definir el título de un componente modal.

Sintaxis:

<Modal> 
    <Modal.Title> ... </Modal.Title>
</Modal>

Las dos propiedades disponibles son:

• as: Esto denota el tipo de elemento. Por defecto es ‘h4’.
• classPrefix: Esto muestra el prefijo de la clase CSS del componente, es decir, el estilo predeterminado. Por defecto, es (‘modal-title’).

Requisito previo: 

• Introducción e instalación de reactJs
• Componente modal de React Suite
• Gancho de reacción useState

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

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm i create-react-app.

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Se verá así:

 

Ejemplo: estamos importando el componente modal de rsuite y, para aplicar los estilos predeterminados de los componentes, estamos importando «rsuite/dist/rsuite.min.css».

También estamos usando useState de gancho de reacción para crear un estado abierto que inicialmente es falso.

Estamos creando un botón abierto con una función onClick handleOpen que establece el estado abierto en verdadero.

Luego estamos agregando el componente Modal, y estamos pasando abierto con el estado abierto que hemos creado. Ahora estamos agregando el <Modal.Title> y dentro de las etiquetas, estamos agregando texto como «Modal Title 1».

En el siguiente componente <Modal.Title> estamos trabajando en su propiedad as, que por defecto es h4, pero en este caso, estamos usando elementType como h1.

import { useState } from "react";
import { Modal } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    const [open, setOpen] = useState(false);
    const handleOpen = () => {
        setOpen(true);
    };
    return (
        <div className="App">
            <button onClick={handleOpen}>open</button>
            <Modal open={open}>
                <Modal.Title>
                    Modal Title 1
                </Modal.Title>
                <Modal.Title
                    as={() => {
                        return <h1>Modal Title 2</h1>;
                    }}
                />
            </Modal>
        </div>
    );
}
  
export default App;

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

npm start

Producción:

 

Ejemplo 2: En este ejemplo, estamos investigando la propiedad classPrefix. El estilo predeterminado, es decir, classPrefix establecido para <Modal.Title> es «modal-title».

Aquí estamos agregando diferentes valores al classPrefix de tres componentes <Modal.Title> para averiguar cómo aparece.

import { useState } from "react";
import { Modal } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    const [open, setOpen] = useState(false);
    const handleOpen = () => {
        setOpen(true);
    };
    return (
        <div className="App">
            <button onClick={handleOpen}>open</button>
            <Modal open={open}>
                <Modal.Title classPrefix="modal-title" as={"h1"}>
                    Modal Title 1
                </Modal.Title>
                <Modal.Title classPrefix="modal-body">
                    Modal Title 2</Modal.Title>
                <Modal.Title classPrefix="modal-footer">
                    Modal Title 3</Modal.Title>
            </Modal>
        </div>
    );
}
  
export default App;

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

npm start

Producción:

 

referencia: https://rsuitejs.com/components/modal/#code-lt-modal-title-gt-code