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. Podemos usar el siguiente enfoque en ReactJS para usar el componente Breadscrum de React Suite.
Accesorios de migas de pan
- classPrefix: se utiliza para indicar 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.
Breadcrumb.Item Props
- activo: Se utiliza para indicar el estado activo.
- componentClass: se utiliza para el elemento personalizado de este componente.
- renderItem: se utiliza para el elemento de representación personalizado.
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 rsuite
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo 1: 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.
Javascript
import React from 'react' import 'rsuite/dist/styles/rsuite-default.css'; import { Breadcrumb } from 'rsuite' export default function App() { return ( <div style={{ display: 'block', width: 700, paddingLeft: 30 }}> <h4>React Suite Breadcrumb Component</h4> <Breadcrumb> <Breadcrumb.Item>Dashboard</Breadcrumb.Item> <Breadcrumb.Item>Profile</Breadcrumb.Item> <Breadcrumb.Item active>Settings</Breadcrumb.Item> </Breadcrumb> </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 2: En este ejemplo, aprenderemos a crear separadores de migas de pan personalizados.
Javascript
import React from 'react' import 'rsuite/dist/rsuite.min.css'; import { Breadcrumb } from 'rsuite' export default function App() { return ( <div style={{ display: 'block', width: 700, paddingLeft: 30 }}> <h1 style={{color:'green'}}>GeeksforGeeks</h1> <h3>React Suite Breadcrumb Component</h3> <Breadcrumb separator="-"> <Breadcrumb.Item>Dashboard</Breadcrumb.Item> <Breadcrumb.Item>Profile</Breadcrumb.Item> <Breadcrumb.Item active>Settings</Breadcrumb.Item> </Breadcrumb> <Breadcrumb separator=">"> <Breadcrumb.Item>Dashboard</Breadcrumb.Item> <Breadcrumb.Item>Profile</Breadcrumb.Item> <Breadcrumb.Item active>Settings</Breadcrumb.Item> </Breadcrumb> <Breadcrumb separator=":"> <Breadcrumb.Item>Dashboard</Breadcrumb.Item> <Breadcrumb.Item>Profile</Breadcrumb.Item> <Breadcrumb.Item active>Settings</Breadcrumb.Item> </Breadcrumb> </div> ); }
PRODUCCIÓN
Referencia: https://rsuitejs.com/components/breadcrumb/
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA