Create an accessible tabs component that allows you to dynamically switch between different views.
npm install --save @react-md/tabs
It is also recommended to install the following packages as they work hand-in-hand with this package:
npm install --save @react-md/theme \
@react-md/typography \
@react-md/utils
123456789101112131415161718192021222324import React, { Fragment } from "react";
import { render } from "react-dom";
import { TabsManager, Tabs, TabPanels, TabPanel } from "@react-md/tabs";
import { Text } from "@react-md/typography";
const tabs = ["Tab 1", "Tab 2", "Tab 3"];
const App = () => (
<TabsManager tabs={tabs} tabsId="tabs">
<Tabs />
<TabPanels>
<TabPanel>
<Text type="headline-4">Panel 1</Text>
</TabPanel>
<TabPanel>
<Text type="headline-4">Panel 2</Text>
</TabPanel>
<TabPanel>
<Text type="headline-4">Panel 3</Text>
</TabPanel>
</TabPanels>
);
render(<App />, document.getElementById("root"));