Nonlinear Programming Methods

    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

    21

    Version

    7.0.0

    License

    BSD-3-Clause

    Unpacked Size

    39.9 kB

    Total Files

    17

    Last publish

    Collaborators

    • trevorcf
    • g4brym
    • snigdha34
    • wrangler-publisher
    • marksteyn
    • chiminator
    • sgoodhew_cf
    • terinjokes
    • third774
    • evanderkoogh
    • jsteinberger
    • jasnell
    • kkoenig
    • asapzacy
    • pcostanzo
    • gregbrimble
    • geelen
    • jgentes
    • rexscaria
    • dcruz_cf
    • xuranwang
    • jculvey
    • sejoker
    • caass
    • vasturiano
    • cf-ci-write
    • segments-write
    • thibmeu
    • xortive
    • gurjinder
    • cf-ci2
    • lvalenta
    • worenga