Create Next App

Tabs

Avatar This is a guideline for you on how to create you first product in your store

Tabs

This is a guideline for you on how to create you first product in your store

Default

Overview

Segments

Dashboard

Content for Overview

ButtonTabs

Overview

Segments

Dashboard

Content for Overview

Disabled

Overview

Segments

Dashboard

Content for Overview

React js


  import React from 'react';
import Tabs from 'vestarplus/Tabs';
import ButtonTabs from './ButtonTabs';


const MyDisabledTabsComponent = () => {
    const [activeTab, setActiveTab] = useState(0);

  const handleNextTab = () => {
    setActiveTab((prevTab) => (prevTab + 1) % tabs.length);
  };
  const tabs = [
    { label: 'Tab 1', content: <div>Content for Tab 1</div> },
    { label: 'Tab 2', content: <div>Content for Tab 2</div> },
  ];

  return (
    <Tabs tabs={tabs} />
    <Tabs tabs={tabs} disabled/>
     <ButtonTabs
       tabs={tabs}
       activeTab={activeTab}
       setActiveTab={setActiveTab}/>

    <div className="mt-5">
         <button onClick={handleNextTab}>Next</button>
    </div>
  );
};

export default MyDisabledTabsComponent;

HTMLCSSJS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css">
        <title>Simple Tabs</title>
    </head>

    <body>
        <div id="tabsContainer" class="tabs-container "></div>
        <script src="script.js"></script>
    </body>

</html>