ReactJS Semantic UI Tab Module
Last Updated :
24 Jun, 2021
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.
In this article we will know how to use Tab Module in ReactJS Semantic UI, Tab Module is used with a menu whose content can be shown on a particular tab click.
Properties:
- Pointing Menu: A menu can be made to point its tab panes.
- Secondary Menu: A secondary menu by adjusting to its content.
- Text Menu: We can format tab menu for the text content.
States:
- loading: This state is used for loading a tab
Syntax:
const tab= [
{
menuItem: 'Title', render: () => <Tab.Pane>Content</Tab.Pane>,
};
]
const tab1 = () => <Tab panes={tab} />
export default tab1
Creating React Application And Installing Module:
Project Structure: It will look like the following.
Step to Run Application: Run the application from the root directory of the project, using the following command.
npm start
Example 1: This is the basic example which shows how to use tab module by using ReactJS Semantic UI Tab Module.
App.js
import React from "react" ;
import { Tab } from "semantic-ui-react" ;
const styleLink = document.createElement( "link" );
styleLink.rel = "stylesheet" ;
styleLink.href =
document.head.appendChild(styleLink);
<br />;
const gfg = [
{ menuItem: "GeeksforGeeks" , render: () => <Tab.Pane>Content 1</Tab.Pane> },
{ menuItem: "GeeksforGeeks 2" , render: () => <Tab.Pane>Content 2</Tab.Pane> },
{ menuItem: "GeeksforGeeks 3" , render: () => <Tab.Pane>Content 3</Tab.Pane> },
];
const btt = () => <Tab panes={gfg} />;
export default btt;
|
Output:
Example 2: In this example, we are showing the loading state in a tab module by using ReactJS Semantic UI Tab Module.
App.js
import React from "react" ;
import { Tab } from "semantic-ui-react" ;
const styleLink = document.createElement( "link" );
styleLink.rel = "stylesheet" ;
styleLink.href =
document.head.appendChild(styleLink);
<br />;
const gfg = [
{
menuItem: "GeeksforGeeks" ,
render: () => <Tab.Pane loading>Content 1</Tab.Pane>,
},
{
menuItem: "GeeksforGeeks 2" ,
render: () => <Tab.Pane loading>Content 2</Tab.Pane>,
},
{
menuItem: "GeeksforGeeks 3" ,
render: () => <Tab.Pane loading>Content 3</Tab.Pane>,
},
];
const btt = () => <Tab panes={gfg} />;
export default btt;
|
Output:
Reference: https://react.semantic-ui.com/modules/tab
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...