A Tabs Layout is a cleaner way of organising different types of content in a single web page. In this type of layout user can easily switch between different sections without having to reload the page for different types of content. Tabs are generally placed horizontally and content related to the selected is only visible to the user. This helps to reserve space in a web page
Let us have a look at how the final feature will look like:
Basic Features of Tabs Layout:
- Tab header/button: It acts as a switchable title using which the user can select which content they want to see
- Content: This section contains the content related to the selected tab
- Active tag functionality: This section contains the logic using which the content associated with the selected tag is displayed
- Data: A separate file is created which maps the header to it’s specified content
Advantages of Tabs Layout
- Efficient space utilisation
- Easier navigation for the user
- Easier segmentation of different categories
- Ensures only necessary features selected by the user are displayed
Prerequisites:
Approach to Creating a Tabs Page:
- Set up a basic react project and install the required dependencies.
- Create the basic layout consisting of a Navbar and Welcome slide.
- Style the components using Tailwind.
- Pass the data dynamically in the components and render it on the screen.
Steps to create the feature:
Step 1: Set up the project using the command
npx create-react-app <<Project_Name>>
Step 2: Navigate to the folder using the command
cd <<Project_Name>>
Step 3: Install the required dependencies using the command
npm install -D tailwindcss
Step 4: Create the tailwind config file using the command
npx tailwindcss init
Step 5: Rewrite the tailwind.config.js file as folllows
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Step 6: Create a folder called components in src directory and create the files Content.js, data.js, and Navbar.js
Project Structure:
The updated dependencies in package.json will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
"devDependencies": {
"tailwindcss": "^3.3.3"
}
Example: Write the following code in respective files:
- App.js: This file imports the components and renders them on the screen
- Content.js: This component displays the Selected Tabs content along with its associated image
- data.js: This file contains the data to be displayed on navbar and content element
- Navbar.js: This file displayes tabs header and logic to change the tabs
- index.css : This file imports Tailwind CSS in our project file
Javascript
// App.js import './App.css'; import Navbar from './components/Navbar'; import { useState } from 'react'; import Content from './components/Content'; import Data from './components/data'; function App() { const data = Data const [visibleTab, setVisibleTab] = useState(0); return ( <div className="App"> <Navbar data={data} visibleTab={visibleTab} setVisibleTab={setVisibleTab} /> <Content data={data} visibleTab={visibleTab} /> </div> ); } export default App; |
Javascript
// Content.js export default function Content(props) { return( <div className="text-left flex flex-col m-3 items-center content-center text-base"> <img src={props.data[props.visibleTab].image} className="h-1/3 w-1/3 shadow-xl"/> <div className="my-3 h-2/3 w-1/3 border-x-4 p-2 shadow-md"> {props.data[props.visibleTab].content} </div> </div> ) } |
Javascript
// Navbar.js // Navbar.js export default function Navbar(props) { return ( <div> <nav classNameName="bg-white fixed w-full z-20 top-0 left-0 border-b border-gray-200 p-4"> <div className="flex flex-wrap items-center justify-center p-4"> className="flex items-center"> <img src= className="mr-2" alt="GFG Logo" /> <span className="self-center text-2xl font-semibold "> neveropen </span> </a> </div> <div className="border-y-2 text-center text-xl mx-2"> {props.data.map((tab, index) => ( <button key={index} className={`bg-transparent hover:bg-slate-200 p-2 mr-2 ${props.visibleTab === index ? 'bg-gray-300' : 'bg-gray-200' }`} onClick={() => props.setVisibleTab(index)}> {tab.title} </button> ))} </div> </nav> </div> ) } |
Javascript
// data.js const Data = [ { title: "JavaScript", content: `JavaScript is a lightweight, cross-platform, single-threaded, and interpreted compiled programming language. It is also known as the scripting language for webpages. It is well-known for the development of web pages, and many non-browser environments also use it.`, image: }, { title: "ReactJS", content: `ReactJS is an open-source JavaScript library used to create user interfaces in a declarative and efficient way. It is a component-based front-end library responsible only for the view layer of a Model View Controller(MVC) architecture. Before you start learning ReactJS, we assume that you have knowledge of HTML, CSS and JavaScript.`, image: }, { title: "NodeJS", content: `Node.js is an open-source and cross-platform runtime environment for executing JavaScript code outside a browser. NodeJS is not a framework and it’s not a programming language. Node.js is used to build back-end services like APIs like Web App or Mobile App.`, image: } ] export default Data; |
CSS
/* index.css */ @tailwind base; @tailwind components; @tailwind utilities; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } |
Steps to run the application:
Step 1: Type the following command in terminal of project directory
npm start
Step 2: Open the following link in browser
http://localhost:3000/
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen 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!
