Wondering what’s next for npm?Check out our public roadmap! »

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

    2.8.4 • 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 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"));

    Install

    npm i @react-md/tabs

    DownloadsWeekly Downloads

    944

    Version

    2.8.4

    License

    MIT

    Unpacked Size

    249 kB

    Total Files

    103

    Last publish

    Collaborators

    • avatar