Tamaño modal de React Suite

Una suite de React es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre los tamaños modales de la suite React. El modal puede tener diferentes tamaños que incluyen página extrapequeña, pequeña, mediana, grande y completa.

Accesorios modales:

• autoFocus: el modal se abre y se enfoca automáticamente cuando se establece en verdadero.
• telón de fondo: el modal mostrará el fondo en su estado abierto cuando se establezca en verdadero.
• backdropClassName: se utiliza para agregar un nombre de clase adicional opcional a .modal-backdrop.
• classPrefix: Denota el prefijo de la clase CSS del componente.
• dialogClassName: se utiliza para la clase CSS aplicada a los Nodes Dialog DOM.
• enforceFocus: el modal evitará que el foco se vaya cuando se abra cuando se establezca en verdadero.
• teclado: Cierra un modal cuando se presiona la tecla ESC.
• onClose: es una función de devolución de llamada que se activa cuando Modal se oculta.
• onEnter: es una función de devolución de llamada que se activa antes de que entre Modal.
• onEntered: es una función de devolución de llamada que se activa después de que Modal finaliza la transición.
• onEntering: es una función de devolución de llamada que se activa cuando el Modal comienza a hacer la transición.
• onExit: es una función de devolución de llamada que se activa justo antes de que Modal se desactive.
• onExited: es una función de devolución de llamada que se activa después de que Modal finaliza la transición.
• onExiting: es una función de devolución de llamada que se activa cuando Modal comienza a salir.
• onOpen: es una función de devolución de llamada que se activa cuando se muestra Modal.
• desbordamiento: Establece automáticamente la altura cuando el contenido del cuerpo es demasiado largo.
• size: Establece el tamaño Modal.

Apoyos Modal.Header:

• as: Se utiliza para agregar un elemento personalizado para este componente.
• classPrefix: Denota el prefijo de la clase CSS del componente.
• closeButton: Muestra el botón de cerrar.
• onHide: es una función de devolución de llamada que se activa cuando Modal está oculto.

Accesorios de título modal:

• as: Se utiliza para agregar un elemento personalizado para este componente.
• classPrefix: Denota el prefijo de la clase CSS del componente.

Apoyos Modal.Pie de página:

• as: Se utiliza para agregar un elemento personalizado para este componente.
• classPrefix: Denota el prefijo de la clase CSS del componente.

Accesorios modales para el cuerpo:

• as : se utiliza para agregar un elemento personalizado para este componente.
• classPrefix : Denota el prefijo de la clase CSS del componente.

Sintaxis:

//Import Statement
import { Modal } from "rsuite";

//App.Js File
Function App() {
return (
    <Modal size="xs || sm || md || lg || full">
        ...
    </Modal>
);
}

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

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

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Ejemplo 1: el siguiente ejemplo muestra un tamaño «xs» del modal.

import "rsuite/dist/rsuite.min.css";
import { Button, Modal } from "rsuite";
import { useState } from "react";
  
export default function App() {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>React Suite Modal Sizes</h4>
  
        <div style={{ marginTop: 20, width: 340 }}>
          <Button onClick={handleOpen}>Open</Button>
          <Modal
            open={open}
            onClose={handleClose}
            size="xs"
          >
            <Modal.Header>
              GeeksforGeeks
            </Modal.Header>
            <Modal.Body>
              <p>This is a <b>xs</b> modal</p>
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={handleClose} appearance="primary">
                Ok
              </Button>
              <Button onClick={handleClose} appearance="subtle">
                Cancel
              </Button>
            </Modal.Footer>
          </Modal>
        </div>
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra un tamaño «sm» del modal.

import "rsuite/dist/rsuite.min.css";
import { Button, Modal } from "rsuite";
import { useState } from "react";
  
export default function App() {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>React Suite Modal Sizes</h4>
  
        <div style={{ marginTop: 20, width: 340 }}>
          <Button onClick={handleOpen}>Open</Button>
          <Modal
            open={open}
            onClose={handleClose}
            size="sm"
          >
            <Modal.Header>
              GeeksforGeeks
            </Modal.Header>
            <Modal.Body>
              <p>This is a <b>sm</b> modal</p>
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={handleClose} appearance="primary">
                Ok
              </Button>
              <Button onClick={handleClose} appearance="subtle">
                Cancel
              </Button>
            </Modal.Footer>
          </Modal>
        </div>
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 3: el siguiente ejemplo muestra un tamaño «md» del modal.

import "rsuite/dist/rsuite.min.css";
import { Button, Modal } from "rsuite";
import { useState } from "react";
  
export default function App() {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>React Suite Modal Sizes</h4>
  
        <div style={{ marginTop: 20, width: 340 }}>
          <Button onClick={handleOpen}>Open</Button>
          <Modal
            open={open}
            onClose={handleClose}
            size="md"
          >
            <Modal.Header>
              GeeksforGeeks
            </Modal.Header>
            <Modal.Body>
              <p>This is a <b>md</b> modal</p>
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={handleClose} appearance="primary">
                Ok
              </Button>
              <Button onClick={handleClose} appearance="subtle">
                Cancel
              </Button>
            </Modal.Footer>
          </Modal>
        </div>
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 4: El siguiente ejemplo muestra un tamaño «lg» del modal.

import "rsuite/dist/rsuite.min.css";
import { Button, Modal } from "rsuite";
import { useState } from "react";
  
export default function App() {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>React Suite Modal Sizes</h4>
  
        <div style={{ marginTop: 20, width: 340 }}>
          <Button onClick={handleOpen}>Open</Button>
          <Modal
            open={open}
            onClose={handleClose}
            size="lg"
          >
            <Modal.Header>
              GeeksforGeeks
            </Modal.Header>
            <Modal.Body>
              <p>This is a <b>lg</b> modal</p>
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={handleClose} appearance="primary">
                Ok
              </Button>
              <Button onClick={handleClose} appearance="subtle">
                Cancel
              </Button>
            </Modal.Footer>
          </Modal>
        </div>
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 5: El siguiente ejemplo muestra un tamaño «completo» del modal.

import "rsuite/dist/rsuite.min.css";
import { Button, Modal } from "rsuite";
import { useState } from "react";
  
export default function App() {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>React Suite Modal Sizes</h4>
  
        <div style={{ marginTop: 20, width: 340 }}>
          <Button onClick={handleOpen}>Open</Button>
          <Modal
            open={open}
            onClose={handleClose}
            size="full"
          >
            <Modal.Header>
              GeeksforGeeks
            </Modal.Header>
            <Modal.Body>
              <p>This is a <b>fullpage</b> modal</p>
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={handleClose} appearance="primary">
                Ok
              </Button>
              <Button onClick={handleClose} appearance="subtle">
                Cancel
              </Button>
            </Modal.Footer>
          </Modal>
        </div>
      </div>
    </center>
  );
}

Producción:

 

Referencia: https://rsuitejs.com/components/modal/#size