React.js Blueprint组件标签

React.js Blueprint 是一个前端UI工具包。它非常优化且受欢迎，用于构建复杂数据密集的桌面应用程序界面。

React.js Blueprint Tab组件作为一个包装器，接受父组件Tabs的属性，并由其管理.

React.js Blueprint属性：

children： 底层元素充当子元素。
className： 这是一个以空格分隔的类名列表，用于传递给子元素。
disabled： 这是一个布尔值。它表示标签是否被禁用。默认为true。
id： 它表示此Tab容器的唯一标识符。
panel： 它用于表示面板内容。
panelClassName： 这是一个以空格分隔的字符串，应用于选项卡面板容器的类名。
title： 它表示选项卡标题元素的内容。

语法：

<Tab> ... </Tab >

先决条件： 介绍和安装reactJS

创建React应用和模块安装：

步骤1： 创建React项目文件夹，打开终端，输入命令npm create-react-app文件夹名称，如果你已经全局安装了create-react-app。如果没有，请使用以下命令全局安装create-react-app： npm -g create-react-app 或者通过 npm i create-react-app 进行本地安装。

npm create-react-app project

步骤2： 在创建项目文件夹（即project）后，使用以下命令切换到该文件夹。

cd project

步骤3： 现在使用以下命令安装依赖项：

npm install @blueprintjs/core

项目结构： 它将看起来像这样。

React.js Blueprint组件标签

示例1： 我们从“@blueprintjs/core”导入Tab。为了应用组件的默认样式，我们导入“@blueprintjs/core/lib/css/blueprint.css”。我们添加了三个Tab组件，并传递不同的值给id、title和panel属性。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import { Tab } from "@blueprintjs/core"; 
  
function App() { 
  
    return ( 
        <div style={{ 
            padding: 30 
        }}> 
            <h3>ReactJS Blueprint Tab Component</h3> 
            <Tab id="0" title="Tab-1" panel={ 
                <p>Tab-1</p> 
            } /> 
            <Tab id="1" title="Tab-2" panel={ 
                <a>Tab-2</a> 
            } /> 
            <Tab id="2" title="Tab-3" panel={ 
                <span>Tab-3</span> 
            } /> 
  
        </div > 
    ); 
} 
  
export default App;

运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序。

npm start

输出：

React.js Blueprint组件标签

示例2： 我们正在从“@blueprintjs/core”中导入Classes和Tab。为了应用组件的默认样式，我们导入“@blueprintjs/core/lib/css/blueprint.css”。我们添加了三个Tab组件，并传递了不同的classNames，并将prop disabled传递给最后一个组件。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import { Classes, Tab } from "@blueprintjs/core"; 
  
function App() { 
  
    return ( 
        <div style={{ 
            padding: 30 
        }}> 
            <h3>ReactJS Blueprint Tab Component</h3> 
            <Tab id="0" title="Tab-1"
                panelClassName={Classes.ELEVATION_2} 
                className={Classes.ELEVATION_0} panel={ 
                    <p>Tab-1</p> 
                } /> 
            <Tab id="1" title="Tab-2"
                className={Classes.ELEVATION_2} 
                panel={ 
                    <a>Tab-2</a> 
                } /> 
            <Tab id="2" title="disabled" disabled panel={ 
                <span>disabled</span> 
            } /> 
  
        </div > 
    ); 
} 
  
export default App;

运行应用程序的步骤： 在项目的根目录下使用以下命令运行应用程序。