Skip to content
Related Articles

Related Articles

React.js Blueprint Component Tab

Improve Article
Save Article
  • Last Updated : 06 Oct, 2022
Improve Article
Save Article

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications.

The React.js Blueprint Tab Component acts as a wrapper that takes the properties of and is managed by its parent component Tabs.

React.js Blueprint Props:

  • children: Underlying elements serve as children.
  • className: It is a space-delimited list of class names to pass along to a child element.
  • disabled: It is a boolean value. It denotes whether the tab is disabled or not. It is true by default.
  • id: It denotes a unique identifier for this Tab container.
  • panel: It is used to denote the panel content.
  • panelClassName: It is a space-delimited string of class names applied to the tab panel container.
  • title: It denotes the content of the tab title element.

 

Syntax:

<Tab> ... </Tab >

Prerequisite: Introduction and Installation reactJS

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  now install the dependency by using the following command:

npm install @blueprintjs/core

Project Structure: It will look like this.

 

Example 1: We are importing the Tab from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”. We are adding three Tab Components and passing different values to id, title, and panel props. 

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;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Example 2: We are importing the  Classes and Tab from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”. We are adding three Tab Component and passing different classNames and passing the prop disabled to the last component.

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;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Reference: https://blueprintjs.com/docs/#core/components/tabs.tab


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!