‚̧Nocturnally Psychologizing Millipede
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    This package has been deprecated

    Author message:

    This package has been deprecated. Please find this package under its new name @cloudflare/component-tabs.

    cf-component-tabs

    7.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    cf-component-tabs

    Cloudflare Tabs Component

    Installation

    Installation with yarn is recommended

     
    $ yarn add cf-component-tabs
     

    Usage

    import React from 'react';
    import {
      Tabs,
      TabsItemUnstyled,
      TabsItemTheme,
      TabsPanel
    } from 'cf-component-tabs';
    import { applyTheme } from 'cf-style-container';
     
    const Tab = applyTheme(TabsItemUnstyled, TabsItemTheme, () => ({
      background: '#FFFFF0'
    }));
     
    class TabsComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          active: 'one'
        };
      }
     
      handleTabChange(id) {
        this.setState({ active: id });
      }
     
      render() {
        return (
          <Tabs
            active={this.state.active}
            tabs={[
              { id: 'one', label: 'Tab One' },
              {
                id: 'two',
                label: 'Tab Two: Custom Header',
                component: Tab
              },
              { id: 'three', label: 'Tab Three' }
            ]}
            onChange={this.handleTabChange.bind(this)}
          >
            <TabsPanel id="one">
              <h1>Tab One</h1>
            </TabsPanel>
     
            <TabsPanel id="two">
              <h1>Tab Two</h1>
            </TabsPanel>
     
            <TabsPanel id="three">
              <h1>Tab Three</h1>
            </TabsPanel>
          </Tabs>
        );
      }
    }
     
    export default TabsComponent;
     

    Keywords

    none

    Install

    npm i cf-component-tabs

    DownloadsWeekly Downloads

    210

    Version

    7.0.0

    License

    BSD-3-Clause

    Unpacked Size

    39.9 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar