@react-md/tabs
TypeScript icon, indicating that this package has built-in type declarations

5.1.6 • Public • Published

@react-md/tabs

Create an accessible tabs component that allows you to dynamically switch between different views.

Installation

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

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import { Fragment } from "react";
import { render } from "react-dom";
import { TabsManager, Tabs, TabPanels, TabPanel } from "@react-md/tabs";
import { Typography } from "@react-md/typography";

const tabs = ["Tab 1", "Tab 2", "Tab 3"];

const App = () => (
  <TabsManager tabs={tabs} tabsId="tabs">
    <Tabs />
    <TabPanels>
      <TabPanel>
        <Typography type="headline-4">Panel 1</Typography>
      </TabPanel>
      <TabPanel>
        <Typography type="headline-4">Panel 2</Typography>
      </TabPanel>
      <TabPanel>
        <Typography type="headline-4">Panel 3</Typography>
      </TabPanel>
    </TabPanels>
);

render(<App />, document.getElementById("root"));

Package Sidebar

Install

npm i @react-md/tabs

Weekly Downloads

788

Version

5.1.6

License

MIT

Unpacked Size

180 kB

Total Files

79

Last publish

Collaborators

  • mlaursen