Colecciones de migas de pan de la interfaz de usuario semántica de ReactJS

La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza el lenguaje CSS, JQuery predefinido para incorporar en diferentes marcos.

En este artículo, sabremos cómo usar las colecciones de migas de pan en la interfaz de usuario semántica de ReactJS.

Breadcrumb se utiliza para mostrar la jerarquía entre el contenido.

Sintaxis:

<Breadcrumb>
  <Breadcrumb.divider/>
</Breadcrumb>

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: instale la interfaz de usuario semántica en su directorio dado.

   npm install semantic-ui-react semantic-ui-css

Estructura del proyecto : Se verá como lo siguiente.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: En este ejemplo, usaremos un elemento de ruta de navegación básico para mostrar la jerarquía entre el contenido mediante el uso de colecciones de rutas de navegación de la interfaz de usuario semántica de ReactJS.  

import React from 'react'
import {Breadcrumb} from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  
const Btt = () =>( 
  <Breadcrumb>
    <Breadcrumb.Section active>One</Breadcrumb.Section>
    <Breadcrumb.Divider icon='angle right'/>
    <Breadcrumb.Section active>Two</Breadcrumb.Section>
    <Breadcrumb.Divider icon='angle right' />
    <Breadcrumb.Section active>Three</Breadcrumb.Section>
    <Breadcrumb.Divider icon='angle right' />
    <Breadcrumb.Section active>Four</Breadcrumb.Section>
    <Breadcrumb.Divider icon='angle right' />
    <Breadcrumb.Section active>Five</Breadcrumb.Section>
  </Breadcrumb>
)
  
export default Btt    

Producción: 

Ejemplo 2: En este ejemplo, usaremos un elemento de ruta de navegación que contiene un divisor para mostrar la relación entre las secciones mediante el uso de colecciones de rutas de navegación de la interfaz de usuario semántica de ReactJS.  

import React from 'react'
import {Breadcrumb} from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  
const Btt = () =>( 
  <Breadcrumb>
    <Breadcrumb.Section active>One</Breadcrumb.Section>
    <Breadcrumb.Divider>/</Breadcrumb.Divider>
    <Breadcrumb.Section active>Two</Breadcrumb.Section>
    <Breadcrumb.Divider>/</Breadcrumb.Divider>
    <Breadcrumb.Section active>Three</Breadcrumb.Section>
    <Breadcrumb.Divider>/</Breadcrumb.Divider>
    <Breadcrumb.Section active>Four</Breadcrumb.Section>
    <Breadcrumb.Divider>/</Breadcrumb.Divider>
    <Breadcrumb.Section active>Five</Breadcrumb.Section>
  </Breadcrumb>
)
  
export default Btt    

Producción:

Referencia: https://react.semantic-ui.com/collections/breadcrumb