BlueprintJS é um kit de ferramentas de IU baseado em React para a web. Esta biblioteca é muito otimizada e popular para a construção de interfaces complexas com grande densidade de dados para aplicativos de desktop. O componente Guias permite ao usuário alternar entre os componentes presentes em determinadas guias diferentes. Podemos usar a seguinte abordagem no ReactJS para usar o componente ReactJS Blueprint Tabs.

Tabs Props:

  • animate: É usado para indicar se o indicador da guia selecionada deve animar seu movimento ou não.
  • className: é usado para denotar uma lista delimitada por espaço de nomes de classes para passar adiante para um elemento filho.
  • defaultSelectedTabId: É usado para denotar o ID da guia selecionada inicialmente, para uso não controlado.
  • id: É usado para denotar o identificador único para este contêiner Tabs.
  • grande: os títulos das guias serão exibidos com um estilo maior quando definido como verdadeiro.
  • onChange: É uma função de retorno de chamada que é acionada quando uma guia na lista de guias é clicada.
  • renderActiveTabPanelOnly: É usado para indicar se os painéis da guia inativos devem ser removidos do DOM e desmontados no React ou não.
  • selectedTabId: É usado para denotar o ID da guia selecionada, para uso controlado.
  • vertical: é usado para indicar se as guias empilhadas verticalmente no lado esquerdo devem ou não ser mostradas.

Adereços de guia:

  • filhos: é usado para passar o componente filho para o elemento subjacente.
  • className: é usado para denotar uma lista delimitada por espaço de nomes de classes para passar adiante para um elemento filho.
  • desativado: é usado para indicar se a guia está desativada ou não.
  • id: É usado para denotar o identificador único para este contêiner de guia.
  • painel: É usado para denotar o conteúdo do painel, renderizado pelas guias pais quando esta guia está ativa.
  • panelClassName: é usado para denotar uma string delimitada por espaço de nomes de classes aplicados ao contêiner do painel de guias.
  • title: É usado para denotar o conteúdo do elemento de título da guia.

Criando o aplicativo React e instalando o módulo:

  • Etapa 1: crie um aplicativo React usando o seguinte comando:

    npx create-react-app foldername

  • Etapa 2: depois de criar a pasta do projeto, ou seja , nome da pasta , mova para ela usando o seguinte comando:

    cd foldername

  • Etapa 3: depois de criar o aplicativo ReactJS, instale o módulo necessário usando o seguinte comando:

    npm install @ blueprintjs / core

Estrutura do projeto: terá a seguinte aparência.

Estrutura do Projeto

Exemplo: Agora anote o seguinte código no arquivo App.js. Aqui, App é nosso componente padrão onde escrevemos nosso 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;

Etapa para executar o aplicativo: execute o aplicativo usando o seguinte comando do diretório raiz do projeto:

npm start

Resultado: agora abra seu navegador e vá para http: // localhost: 3000 / , você verá a seguinte saída:

Referência: https://blueprintjs.com/docs/#core/components/tabs