Accesorios de React Suite Breadcrumb <Breadcrumb>

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end.

El componente Breadcrumb permite al usuario mostrar la ruta de la página actual y también dentro de una jerarquía de navegación. Hay diferentes accesorios para cada elemento de la ruta de navegación para que el usuario diseñe la jerarquía de la ruta.

<Breadcrumb> Accesorios:

• as: se utiliza para el elemento personalizado de este componente.
• classPrefix: ‘Breadcrumb’ denota el prefijo de la clase CSS del componente.
• maxItems: se utiliza para establecer el número máximo de migas de pan para mostrar.
• onExpand: es una función que se activa cuando está en la vista contraída y hace clic en los puntos suspensivos.
• separator: Se utiliza para el separador personalizado.

Enfoque : Vamos a crear un proyecto React e instalar el módulo React Suite. Luego, crearemos una interfaz de usuario que mostrará React Suite Breadcrumb Props.

Creando proyecto React:

Paso 1: para crear una aplicación de reacción, debe instalar los módulos de reacción a través del comando npx. Se usa «npx» en lugar de «npm» porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

npx create-react-app project_name

Paso 2: después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

cd project_name

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: después de ejecutar los comandos mencionados en los pasos anteriores, si abre el proyecto en un editor, puede ver una estructura de proyecto similar a la que se muestra a continuación. El nuevo componente que el usuario crea o los cambios de código que realizaremos se realizarán en la carpeta de origen.

Estructura del proyecto

Ejemplo 1: estamos creando una interfaz de usuario que muestra diferentes migas de pan de React Suite usando sus accesorios que se pueden ver en el código fuente.

import React from "react";
import { Breadcrumb } from 'rsuite'
import '../node_modules/rsuite/dist/rsuite.min.css';
  
class App extends React.Component {
  render() {
    return (
      <div style={{ margin: 100 }}>
        <h3 style={{ color: "green"}}>
          Geeks for Geeks
        </h3>
        <h6>React Suite Breadcrumb Props</h6>
        <br /><br />
        <Breadcrumb separator={"-->"}>
          <Breadcrumb.Item href="/">
            Geeks for Geeks
          </Breadcrumb.Item>
          <Breadcrumb.Item href="/">
            Articles
          </Breadcrumb.Item>
          <Breadcrumb.Item active>
            Breadcrumb Props
          </Breadcrumb.Item>
        </Breadcrumb>
      </div>
    );
  }
}
  
export default App;

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. 

Migaja de pan

Ejemplo 2: estamos creando una interfaz de usuario que muestra diferentes migas de pan de React Suite usando sus accesorios que se pueden ver en el código fuente.

import React from "react";
import { Breadcrumb } from 'rsuite'
import '../node_modules/rsuite/dist/rsuite.min.css';
  
class App extends React.Component {
  render() {
    return (
      <div>
        <h3 style={{ color: "green"}}>Geeks for Geeks</h3>
        <h6>React Suite Breadcrumb Props</h6><br /><br />
        <Breadcrumb  maxItems={5} separator={"-->"}>
          <Breadcrumb.Item href="/">Path 1</Breadcrumb.Item>
          <Breadcrumb.Item href="/">Path 2</Breadcrumb.Item>
          <Breadcrumb.Item href="/">Path 3</Breadcrumb.Item>
          <Breadcrumb.Item href="/">Path 4</Breadcrumb.Item>
          <Breadcrumb.Item href="/">Path 5</Breadcrumb.Item>
          <Breadcrumb.Item active>Path 6</Breadcrumb.Item>
        </Breadcrumb>
      </div>
    );
  }
}
  
export default App;

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida.

Pan rallado con Expandir

Referencia: https://rsuitejs.com/components/breadcrumb/#code-lt-breadcrumb-gt-code