Módulo de pestaña de IU 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 el Módulo de pestañas en la interfaz de usuario semántica de ReactJS, el Módulo de pestañas se usa con un menú cuyo contenido se puede mostrar en un clic de pestaña en particular.

Propiedades:

• Menú señalador:
• Menú secundario:
• Menú de texto: podemos dar formato al menú de pestañas para el contenido de texto.

• estado

Sintaxis:

const tab= [
  {
    menuItem: 'Title', render: () => <Tab.Pane>Content</Tab.Pane>,
  };
]

const tab1 = () => <Tab panes={tab} />

export default tab1

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: Este es el ejemplo básico que muestra cómo usar el módulo de pestañas usando el módulo de pestañas de la interfaz de usuario semántica de ReactJS.

import React from "react";
import { Tab } 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);
  
<br />;
  
const gfg = [
  { menuItem: "GeeksforGeeks", render: () => <Tab.Pane>Content 1</Tab.Pane> },
  { menuItem: "GeeksforGeeks 2", render: () => <Tab.Pane>Content 2</Tab.Pane> },
  { menuItem: "GeeksforGeeks 3", render: () => <Tab.Pane>Content 3</Tab.Pane> },
];
  
const btt = () => <Tab panes={gfg} />;
  
export default btt;

Producción: 

Ejemplo 2: en este ejemplo, mostramos el estado de carga en un módulo de pestañas mediante el módulo de pestañas de la interfaz de usuario semántica de ReactJS.

import React from "react";
import { Tab } 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);
  
<br />;
  
const gfg = [
  {
    menuItem: "GeeksforGeeks",
    render: () => <Tab.Pane loading>Content 1</Tab.Pane>,
  },
  {
    menuItem: "GeeksforGeeks 2",
    render: () => <Tab.Pane loading>Content 2</Tab.Pane>,
  },
  {
    menuItem: "GeeksforGeeks 3",
    render: () => <Tab.Pane loading>Content 3</Tab.Pane>,
  },
];
  
const btt = () => <Tab panes={gfg} />;
  
export default btt;

Producción:

Referencia: https://react.semantic-ui.com/modules/tab