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
