ReactJS MDBootstrap Tabs Component

0 0 3 minutes read

MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Tabs Component in ReactJS MDBootstrap. Tabs Component are used to improve website clarity and increase user experience.

Properties:

className: it is used to add custom classes to MDBTabs.
justify: it is used to set equal width of the MDBTabs items.
fill: it is used to fill the available space in MDBTabs items.
pills: it is used to necessary to change the MDBTabs into pills.

Syntax:

<MDBTabs>
    <MDBTabsItem> React MDBootstrap </MDBTabsItem>
</MDBTabs>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

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

cd foldername

Step 3: Install ReactJS MDBootstrap in your given directory.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Step 4: Import the element to be used in the project.

import { MDBTabs } from 'mdb-react-ui-kit'

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 that shows how to use Tabs Component.

App.js

Javascript

import React, { useState } from 'react'; 
import { MDBTabs, MDBTabsItem, MDBTabsLink,  
    MDBTabsContent, MDBTabsPane } from 'mdb-react-ui-kit'; 
  
export default function App() { 
    const [basicActive, gfg1] = useState('1'); 
  
    const click = (value) => { 
        if (value === basicActive) { 
            return; 
        } 
  
        gfg1(value); 
    }; 
  
    return ( 
        <div id='gfg'> 
            <h2>zambiatek</h2> 
            <h4>ReactJS MDBootstrap Tabs Component</h4> 
            <MDBTabs className='mb-3'> 
                <MDBTabsItem> 
                    <MDBTabsLink onClick={() => click('1')}  
                    active={basicActive === '1'}> 
                        Python 
                    </MDBTabsLink> 
                </MDBTabsItem> 
                <MDBTabsItem> 
                    <MDBTabsLink onClick={() => click('2')}  
                    active={basicActive === '2'}> 
                        C++ 
                    </MDBTabsLink> 
                </MDBTabsItem> 
                <MDBTabsItem> 
                    <MDBTabsLink onClick={() => click('3')}  
                    active={basicActive === '3'}> 
                        JavaScript 
                    </MDBTabsLink> 
                </MDBTabsItem> 
            </MDBTabs> 
  
            <MDBTabsContent> 
                <MDBTabsPane show={basicActive === '1'}> 
                    Python is a high-level, general-purpose 
                    and a very popular programming language 
                </MDBTabsPane> 
                <MDBTabsPane show={basicActive === '2'}> 
                    C++ is a general-purpose programming  
                    language that was developed as an <br />  
                    enhancement of the C language to include  
                    object-oriented paradigm 
                </MDBTabsPane> 
                <MDBTabsPane show={basicActive === '3'}> 
                    JavaScript is the world most popular lightweight, 
                    interpreted compiled programming <br />  
                    language. It is also known as scripting language 
                    for web pages 
                </MDBTabsPane> 
            </MDBTabsContent> 
        </div> 
    ); 
}

Output:

Example 2: In this example, we will know how to use pills property in a Tabs Component.

App.js

Javascript

import React, { useState } from 'react'; 
import { MDBTabs, MDBTabsItem, MDBTabsLink,  
    MDBTabsContent, MDBTabsPane } from 'mdb-react-ui-kit'; 
  
export default function App() { 
    const [basicActive, gfg1] = useState('2'); 
  
    const click = (value) => { 
        if (value === basicActive) { 
            return; 
        } 
  
        gfg1(value); 
    }; 
  
    return ( 
        <div id='gfg'> 
            <h2>zambiatek</h2> 
            <h4>ReactJS MDBootstrap pills Component</h4> 
            <MDBTabs pills className='mb-3'> 
                <MDBTabsItem> 
                    <MDBTabsLink onClick={() => click('1')}  
                    active={basicActive === '1'}> 
                        Python 
                    </MDBTabsLink> 
                </MDBTabsItem> 
                <MDBTabsItem> 
                    <MDBTabsLink onClick={() => click('2')}  
                    active={basicActive === '2'}> 
                        C++ 
                    </MDBTabsLink> 
                </MDBTabsItem> 
                <MDBTabsItem> 
                    <MDBTabsLink onClick={() => click('3')}  
                    active={basicActive === '3'}> 
                        JavaScript 
                    </MDBTabsLink> 
                </MDBTabsItem> 
            </MDBTabs> 
  
            <MDBTabsContent> 
                <MDBTabsPane show={basicActive === '1'}> 
                    Python is a high-level, general-purpose 
                    and a very popular programming language 
                </MDBTabsPane> 
                <MDBTabsPane show={basicActive === '2'}> 
                    C++ is a general-purpose programming  
                    language that was developed <br />  
                    as an enhancement of the C language  
                    to include object-oriented paradigm 
                </MDBTabsPane> 
                <MDBTabsPane show={basicActive === '3'}> 
                    JavaScript is the world most popular  
                    lightweight, interpreted compiled <br />  
                    programming language. It is also known  
                    as scripting language for web pages 
                </MDBTabsPane> 
            </MDBTabsContent> 
        </div> 
    ); 
}

Output:

Reference: https://mdbootstrap.com/docs/b5/react/navigation/tabs

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!