Componente React-Bootstrap Fade and Collapse

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.

Estructura del proyecto

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: 

Publicación traducida automáticamente

Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *