React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. Fade Component proporciona una forma de agregar una animación de fundido a un componente o elemento secundario. Collapse Component proporciona una forma de agregar una animación de alternancia de colapso a un componente o elemento. Podemos usar el siguiente enfoque en ReactJS para usar el componente Fade and Collapse de react-bootstrap.
Accesorios de desvanecimiento:
- aparecer: cuando el componente se monta, se utiliza para ejecutar la animación de aparición gradual.
- in: Se utiliza para mostrar el componente.
- mountOnEnter: se utiliza para montar el componente mientras espera hasta que se activa la primera transición de entrada .
- onEnter: es una función de devolución de llamada que se activa antes de que el componente se desvanezca.
- onEntered: es una función de devolución de llamada que se activa después de que el componente haya desaparecido.
- onEntering: es una función de devolución de llamada que se activa después de que el componente comienza a aparecer gradualmente.
- onExit: es una función de devolución de llamada que se activa antes de que el componente desaparezca.
- onExited: es una función de devolución de llamada que se activa después de que el componente se haya desvanecido.
- onExiting: es una función de devolución de llamada que se activa después de que el componente comienza a desvanecerse.
- timeout: se utiliza para indicar la duración de la animación de desvanecimiento en milisegundos.
- unmountOnExit: Se utiliza para desmontar el componente.
Contraer accesorios:
- aparecer: cuando el componente se monta, se utiliza para ejecutar la animación de expansión.
- children: Se utiliza para definir el elemento child de este componente.
- className: se utiliza para agregar un nombre de clase para el estilo de este componente.
- Dimensión: Denota la dimensión en forma de alto y ancho.
- getDimensionValue: es una función que devuelve el ancho o alto del Node DOM animado.
- in: Se utiliza para mostrar el componente.
- mountOnEnter: se utiliza para montar el componente mientras espera hasta que se activa la primera transición de entrada .
- onEnter: es una función de devolución de llamada que se activa antes de que se expanda el componente.
- onEntered: es una función de devolución de llamada que se activa después de que el componente se haya expandido.
- onEntering: es una función de devolución de llamada que se activa después de que el componente comienza a expandirse.
- onExit: es una función de devolución de llamada que se activa antes de que el componente colapse.
- onExited: es una función de devolución de llamada que se activa después de que el componente se haya colapsado.
- onExiting: es una función de devolución de llamada que se activa después de que el componente comienza a colapsar.
- rol: Se utiliza para definir el rol ARIA del elemento contraíble.
- timeout: se utiliza para indicar la duración de la animación de colapso en milisegundos.
- unmountOnExit: Se utiliza para desmontar el componente.
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 , muévase 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 de componente Fade: 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.
Nombre de archivo: App.js
Javascript
import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.css'; import Button from 'react-bootstrap/Button' import Fade from 'react-bootstrap/Fade' export default function App() { const [open, setOpen] = useState(false); return ( <div style={{ display: 'block', width: 700, padding: 30 }}> <h4>React-Bootstrap Fade Component</h4> <div style={{ width: 660, height: 'auto' }}> <Button variant="link" onClick={() => setOpen(!open)} aria-expanded={open} aria-controls="fadeID" > Click to see Fade Effect! </Button> <Fade in={open}> <div id="fadeID" style={{ width: 300, textAlign: 'justify' }} > Greetings from GeeksforGeeks, How are you? Stay safe Always keep yourself health. Study and work hard. </div> </Fade> </div> </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:
Ejemplo de colapsar componente: 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.
Nombre de archivo: App.js
Javascript
import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.css'; import Button from 'react-bootstrap/Button' import Collapse from 'react-bootstrap/Collapse' export default function App() { const [open, setOpen] = useState(false); return ( <div style={{ display: 'block', width: 700, padding: 30 }}> <h4>React-Bootstrap Collapse Component</h4> <div style={{ width: 660, height: 'auto' }}> <Button variant="link" onClick={() => setOpen(!open)} aria-expanded={open} aria-controls="collapseID" > Click to see Collapse Effect! </Button> <Collapse in={open}> <div id="collapseID" style={{ width: 300, textAlign: 'justify' }} > Greetings from GeeksforGeeks, How are you? Stay safe Always keep yourself health. Study and work hard. </div> </Collapse> </div> </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/utilities/transitions/#collapse
- https://react-bootstrap.github.io/utilities/transitions/#fade
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA