Componente de pestañas de Blueprint de ReactJS

BlueprintJS es un kit de herramientas de interfaz de usuario basado en React para la web. Esta biblioteca está muy optimizada y es popular para crear interfaces que son complejas y densas en datos para aplicaciones de escritorio. Podemos usar el siguiente enfoque en ReactJS para usar el componente de pestañas Blueprint de ReactJS.

Accesorios de pestañas:

• animar: Se utiliza para indicar si el indicador de la pestaña seleccionada debe animar su movimiento o no.
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• defaultSelectedTabId: se utiliza para indicar la identificación de la pestaña seleccionada inicialmente, para uso no controlado.
• id: se utiliza para indicar el identificador único para este contenedor de pestañas.
• grande: los títulos de las pestañas se mostrarán con un estilo más grande cuando se establece en verdadero.
• onChange: es una función de devolución de llamada que se activa cuando se hace clic en una pestaña de la lista de pestañas.
• renderActiveTabPanelOnly: se utiliza para indicar si los paneles de pestañas inactivos deben eliminarse del DOM y desmontarse en React o no.
• selectedTabId: se utiliza para indicar el ID de la pestaña seleccionada, para un uso controlado.
• vertical: Se utiliza para indicar si mostrar pestañas apiladas verticalmente en el lado izquierdo o no.

Accesorios de pestañas:

• children: Se utiliza para pasar el componente hijo al elemento subyacente.
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• disabled: Se utiliza para indicar si la pestaña está deshabilitada o no.
• id: se utiliza para denotar el identificador único para este contenedor de pestañas.
• panel: se utiliza para indicar el contenido del panel, representado por las pestañas principales cuando esta pestaña está activa.
• panelClassName: se utiliza para indicar una string de nombres de clases delimitada por espacios que se aplica al contenedor del panel de pestañas.
• título: se utiliza para indicar el contenido del elemento de título de la pestaña.

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 @blueprintjs/core

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: 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.

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Tabs, Tab } from "@blueprintjs/core";
  
function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint Tabs Component</h4>
            <Tabs
                animate={true}
                key={"vertical"}
                vertical={false}
            >
                <Tab id="rx" title="Tab1" panel={
                    <p>Sample Content 1</p>
                } />
                <Tab id="ng" title="Tab2" panel={
                    <p>Sample Contet 2</p>
                } />
            </Tabs>
        </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:

Referencia: https://blueprintjs.com/docs/#core/components/tabs