React-Bootstrap es un framework front-end que fue diseñado teniendo en cuenta la reacción. Overlay Trigger Component se posiciona con la ayuda de ref y style prop para nuestro componente de superposición. Podemos usar el siguiente enfoque en ReactJS para usar el componente OverlayTrigger de react-bootstrap.
Accesorios de OverlayTrigger:
- children: Se utiliza para indicar el atributo de los niños para una superposición.
- defaultShow: Se utiliza para indicar el estado visible inicial de una superposición.
- retraso: se utiliza para indicar el tiempo de retraso para que una superposición se muestre y se oculte una vez que se activa.
- flip: se utiliza para indicar el estado inicial de flip de una superposición.
- onHide: Se utiliza para indicar la propiedad on hide de una superposición.
- onToggle: Es un
- superposición: es texto o una superposición de elementos que está al lado del objetivo.
- colocación: Se utiliza para sthe
- Es un objeto de configuración de Popper.js que se pasa a la instancia subyacente de popper.
- Es el atributo de destino que se utiliza cuando es necesario establecer un destino para una superposición.
- se usa para s
Accesorios superpuestos:
- children: Se utiliza para indicar el atributo de los niños para una superposición.
- contenedor: Es básicamente un
- onEnter: es una función de devolución de llamada que se activa antes de las transiciones de superposición.
- onEntered: es una función de devolución de llamada que se activa
- onEntering: es una función de devolución de llamada que se activa cuando la superposición comienza a hacer la transición.
- onExit: es una función de devolución de llamada que se activa
- onExited: es una función de devolución de llamada que se activa después de que la superposición finaliza la transición.
- onExiting: Es una función de devolución de llamada que se activa
- onHide: Se utiliza para indicar la propiedad on hide de una superposición.
- colocación: Se utiliza para sthe
- Es un objeto de configuración de Popper.js que se pasa a la instancia subyacente de popper.
- rootClose: se usa para especificar si llamar a la función onHide cuando el usuario hace clic fuera de la superposición.
- rootCloseEvent: un
- Es el atributo de destino que se utiliza cuando es necesario establecer un destino para una superposición.
- transición: Se utiliza para la animación de t
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 react-bootstrap npm install bootstrap
Estructura del proyecto: Tendrá el siguiente aspecto.
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.
App.js
import React from 'react'; import 'bootstrap/dist/css/bootstrap.css'; import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; import Popover from 'react-bootstrap/Popover' import Button from 'react-bootstrap/Button'; export default function App() { return ( <div style={{ display: 'block', width: 700, padding: 30 }}> <h4>React-Bootstrap OverlayTrigger Component</h4> <OverlayTrigger placement="bottom" trigger="click" overlay={( <Popover> <Popover.Title as="h3"> Hello User </Popover.Title> </Popover> )}> <Button variant="primary"> OverlayTrigger Button </Button> </OverlayTrigger> </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://react-bootstrap.github.io/components/overlays/#overlay-trigger-props
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA