Top
TabPanel API - API
TabPanel API
Props (20)
Callback Props (2)
Styling Props (12)
Bool
default: false
If activateOnFocus is true, tabs activate the moment when they receive focus.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      enableKeyboardNavigation: true,
      activateOnFocus: false
    }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableKeyboardNavigation}
          onChange={(enableKeyboardNavigation) => this.setState({ enableKeyboardNavigation })}
        >
          enableKeyboardNavigation
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.activateOnFocus}
          onChange={(activateOnFocus) => this.setState({ activateOnFocus })}
        >
          activateOnFocus
        </CheckBox>
      </div>

      <NotificationBoard id="board" />

      <TabPanel
        enableKeyboardNavigation={this.state.enableKeyboardNavigation}
        activateOnFocus={this.state.activateOnFocus}
      >
        <div tabProps={{ title: 'Home' }}>
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>Button</li>
            <li>CheckBox</li>
            <li>ColorPicker</li>
            <li>ComboBox</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
          content: '"Features" tab title clicked',
          style: { marginTop: 56 }
        })}}>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabProps={{ title: 'About us' }}>
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}
export default () => <App />
Number
default: 0
The active index for the TabPanel. If you specify this, make sure you also use onActivate(index) to control tab activation. Otherwise, clicking on tab titles has no effect.
For uncontrolled behaviour, see defaultActiveIndex.
When using controlled behavior via activeIndex, make sure you also specify onActivate(activeIndex) to update the activeIndex explicitly.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { activeIndex: 1 }
  }
  render() {
    return <div>
      <p>Current activeIndex: {this.state.activeIndex}.</p>
      <TabPanel style={{ maxWidth: 800 }}
        onActivate={(index) => this.setState({ activeIndex: index })}
        activeIndex={this.state.activeIndex}
      >
        <div tabTitle="Home">
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabTitle="Features">
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabTitle="About us">
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
Bool
default: undefined
Will render a closing icon to the right of the tabTitle. The click event on this icon will call the user defined onCloseTab function, which will handle the closing of the tab.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      closeable: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.closeable}
          onChange={(closeable) => this.setState({ closeable })}
        >
          Closeable
        </CheckBox>
      </div>
      <NotificationBoard id="board" />
      <TabPanel closeable={this.state.closeable} style={{height: 500}}>
        <div tabProps={{ title: 'Home' }}>
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
          content: '"Features" tab title clicked',
          style: { marginTop: 56 }
        })}}>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabProps={{ title: 'About us' }}>
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
Number
default: 0
Specifies the initially active tab.
For controlled behaviour, see activeIndex.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () =>  <div>
  <p>The second index is active by default.</p>
  <NotificationBoard id="board" />
  <TabPanel defaultActiveIndex={1}>
    <div tabProps={{ title: 'Home' }}>
      <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
      <p>
        Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
      </p>
      <p>
      We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
      </p>
      The toolkit contains:
      <ul>
        <li>Accordion</li>
        <li>DatePicker</li>
        <li>MaskedInput</li>
        <li>Menu</li>
        <li>Notification</li>
      </ul> and many other components.
    </div>
    <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
      content: '"Features" tab title clicked',
      style: { marginTop: 56 }
    })}}>
      When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
      <ul>
        <li>
          <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
        </li>
        <li>
          <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
        </li>
        <li>
          <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
        </li>
        <li>
          <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
        </li>
        <li>
          <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
        </li>
      </ul>
    </div>
    <div tabProps={{ title: 'About us' }}>
      We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
    </div>
    <div tabTitle="Sign up">
      <h3>Sign-up form</h3>
      <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
      <form>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
        </label>

        <button>Sign me up!</button>
        <p style={{ fontStyle: 'italic' }}>
          Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
        </p>
      </form>
    </div>
  </TabPanel>
</div>
Bool
default: false
When enableKeyboardNavigation=true, the TabPanel can be collapsed and expanded using keyboard shortcuts.
Here's the list of keyboard shortcuts you can use:
  • Enter - activates the selected tab.
  • Left + Right keys - navigates between the panel's tabs.
  • Home and End - will get you to the first and last tab.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { enableKeyboardNavigation: true }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableKeyboardNavigation}
          onChange={(enableKeyboardNavigation) => this.setState({ enableKeyboardNavigation })}
        >
          enableKeyboardNavigation
        </CheckBox>
      </div>

      <NotificationBoard id="board" />

      <TabPanel defaultActiveIndex={1} enableKeyboardNavigation={this.state.enableKeyboardNavigation}>
        <div tabProps={{ title: 'Home' }}>
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
          content: '"Features" tab title clicked',
          style: { marginTop: 56 }
        })}}>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabProps={{ title: 'About us' }}>
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}
export default () => <App />
Fn(React.Node)
default: undefined
A function that passes the content to <TabPanel /> body.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

const renderContent = () => {
  return <div style={{
    height: 300,
    width: '100%',
    background: '#d8d8d8',
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'row',
    alignItems: 'center'
  }}>
    <div
      style={{
        padding: '0px 50px',
        border: '3px solid red',
        width: 318,
        height: 70,
        background: '#dedeff'
      }}
    >
      <h3>Error 404 - Page not found</h3>
    </div>
  </div>
}

export default () => <div>
  <NotificationBoard id="board" />
  <TabPanel renderContent={renderContent}>
    <div tabProps={{ title: 'Home' }}>
      <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
      <p>
        Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
      </p>
      <p>
      We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
      </p>
      The toolkit contains:
      <ul>
        <li>Accordion</li>
        <li>DatePicker</li>
        <li>MaskedInput</li>
        <li>Menu</li>
        <li>Notification</li>
      </ul> and many other components.
    </div>
    <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
      content: '"Features" tab title clicked',
      style: { marginTop: 56 }
    })}}>
      When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
      <ul>
        <li>
          <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
        </li>
        <li>
          <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
        </li>
        <li>
          <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
        </li>
        <li>
          <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
        </li>
        <li>
          <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
        </li>
      </ul>
    </div>
    <div tabProps={{ title: 'About us' }}>
      We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
    </div>
    <div tabTitle="Sign up">
      <h3>Sign-up form</h3>
      <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
      <form>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
        </label>

        <button>Sign me up!</button>
        <p style={{ fontStyle: 'italic' }}>
          Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
        </p>
      </form>
    </div>
  </TabPanel>
</div>
Bool
default: undefined
Passing true, will make the content of the tab panel to show scrollbars, and not the <TabPanel /> component wrapper.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      scrollTabContent: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.scrollTabContent}
          onChange={(scrollTabContent) => this.setState({ scrollTabContent })}
        >
          Scroll tab content
        </CheckBox>
      </div>
      <NotificationBoard id="board" />
      <TabPanel scrollTabContent={this.state.scrollTabContent}>
        <div tabProps={{ title: 'Home' }} style={{ height: 200, background: '#f1f1f1', margin: 20 }}>
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div
          tabProps={{
            title: "Features",
            onClick: () => zippy.notification.board.addNotification({
              content: '"Features" tab title clicked',
              style: { marginTop: 56 }
            })
          }}
          style={{ height: 200, background: '#f1f1f1', margin: 20 }}
        >
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabProps={{ title: 'About us' }} style={{ height: 200, background: '#f1f1f1', margin: 20 }}>
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up" style={{ height: 200, background: '#f1f1f1', margin: 20 }}>
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
one|all
default: "one"
Specifies whether the <TabPanel /> should render all contents of all tabs or only the active one. By default, only the active tab is rendered.
Possible values are:
  • "one" - it renders only the active tab.
  • "all" - it renders all tabs.
Bool
default: undefined
By default, the tab content is wrapped into a container which will flex to fill the size given by the tab panel or the parent node of the <TabPanel />. This means that the content will not necessarily be as large or as tall as the wrapper. To force the content to have the size of the wrapper, set stretchTabContent=true.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      stretchTabContent: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.stretchTabContent}
          onChange={(stretchTabContent) => this.setState({ stretchTabContent })}
        >
          Stretch tab content
        </CheckBox>
      </div>
      <NotificationBoard id="board" />
      <TabPanel stretchTabContent={this.state.stretchTabContent} style={{height: 500}}>
        <div tabProps={{ title: 'Home' }} style={{ background: '#d8d8d8' }}>
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
        </div>
        <div style={{ background: '#d8d8d8' }} tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
          content: '"Features" tab title clicked',
          style: { marginTop: 56 }
        })}}>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div style={{ background: '#d8d8d8' }} tabProps={{ title: 'About us' }}>
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div style={{ background: '#d8d8d8' }} tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
start|center|stretch|end|space-around|space-between
default: "start"
The <TabPanel /> supports multiple tab alignment strategies via the tabAlign prop:
  • "start" - align tabs at the start of the container. This is the default alignment.
  • "center" - align tabs at the center of the container.
  • "end" - align tabs at the end of the container.
  • "stretch" - stretch the tabs to fill the container available space.
  • "space-around" - add space around the tabs - it's how the flexbox space-around works.
  • "space-between" - add space between the tabs - it's how the flexbox space-around works. Space is not added before the first tab and after the last tab.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      tabAlign: 'start'
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20}}>
        <p>Choose the tab align:</p>
        <RadioButtonGroup radioValue={this.state.tabAlign} radioOptions={[
          { value: 'start', label: 'start' },
          { value: 'center', label: 'center' },
          { value: 'end', label: 'end' },
          { value: 'stretch', label: 'stretch' },
          { value: 'space-around', label: 'space-around' },
          { value: 'space-between', label: 'space-between' }
        ]}
          onChange={({checkedItemValue: tabAlign}) => this.setState({
            tabAlign
          })}
        />
      </div>
      <TabPanel style={{ maxWidth: 800 }} tabAlign={this.state.tabAlign}>
        <div tabTitle="Home">
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabTitle="Features">
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabTitle="About us">
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to show ellipsis on overflowing tab titles or not.
By default, tab titles are sized to fit their contents, so in the example below we needed to add maxWidth: 100 in order to force them to overflow.
NOTE: ellipsis is displayed only if you're specifying a String as a tab title - otherwise you have to implement ellipsis yourself.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { tabEllipsis: true }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.tabEllipsis}
          onChange={(tabEllipsis) => this.setState({ tabEllipsis })}
        >Show tab ellipsis</CheckBox>
      </div>

      <NotificationBoard id="board" />

      <TabPanel
        tabStyle={{ maxWidth: 100 }}
        tabEllipsis={this.state.tabEllipsis}
      >
        <div tabProps={{ title: 'Home is where your heart is' }}>
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
          content: '"Features" tab title clicked',
          style: { marginTop: 56 }
        })}}>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabProps={{ title: 'About us' }}>
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}
export default () => <App />
Fn(tabProps)
default: undefined
Specifies a custom render function for tabs.
When the tabFactory returns undefined, the default rendering occurs. This can be useful when want to mutate and modify the default props - for example, when adding some custom styling, but still want the default rendering to occur.
If you only want to change styling, see tabStyle.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

function tabFactory(tabProps) {
  tabProps.style = { color: 'red' }
}

export default () => <TabPanel style={{ maxWidth: 800 }} tabFactory={tabFactory}>
  <div tabTitle="Home">
    <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
    <p>
      Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
    </p>
    <p>
    We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
    </p>
    The toolkit contains:
    <ul>
      <li>Accordion</li>
      <li>DatePicker</li>
      <li>MaskedInput</li>
      <li>Menu</li>
      <li>Notification</li>
    </ul> and many other components.
  </div>
  <div tabTitle="Features">
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    <ul>
      <li>
        <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
      </li>
      <li>
        <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
      </li>
      <li>
        <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
      </li>
    </ul>
  </div>
  <div tabTitle="About us">
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </div>
  <div tabTitle="Sign up">
    <h3>Sign-up form</h3>
    <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
    <form>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
      </label>

      <button>Sign me up!</button>
      <p style={{ fontStyle: 'italic' }}>
        Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
      </p>
    </form>
  </div>
</TabPanel>
top|left|right|bottom
default: "top"
The <TabPanel /> supports multiple positions for the tabs in the <TabStrip />strategies via the tabPosition prop:
  • "top" - the tabs are placed at the top of the container, above the content. This is the default position.
  • "bottom" - the tabs are placed at the bottom of the container, under the content.
  • "left" - the tabs are placed at the left of the container.
  • "right" - the tabs are placed at the right of the container.
For tabPosition="left" or tabPosition="right", it's also possible to have vertical tabs.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

const tabs = [
  { title: <i>My account</i> },
  { title: 'Settings' },
  { title: 'Contact form', disabled: true },
  { title: <i>Profile</i>}
]
class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      tabPosition: 'top',
      vertical: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20}}>
        <p>Choose the tab align:</p>
        <RadioButtonGroup radioValue={this.state.tabPosition} radioOptions={[
          { value: 'top', label: 'top' },
          { value: 'bottom', label: 'bottom' },
          { value: 'left', label: 'left' },
          { value: 'right', label: 'right' }
        ]}
          onChange={({checkedItemValue: tabPosition}) => {
            this.setState({
              tabPosition,
              vertical: this.state.vertical ?
                tabPosition === 'left' || tabPosition === 'right' :
                false
            })
          }}
        />
      </div>
      <div style={{ marginBottom: 20}}>
        <CheckBox checked={this.state.vertical}
          disabled={this.state.tabPosition == 'top' || this.state.tabPosition=='bottom'}
          onChange={(vertical) => this.setState({
            vertical
          })}
        >Vertical tabs (only available for left/right position)
        </CheckBox>
      </div>
      <TabPanel style={{ maxWidth: 800, maxHeight: 370 }} vertical={this.state.vertical} tabPosition={this.state.tabPosition}>
        <div tabTitle="Home">
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul>
        </div>
        <div tabTitle="Features">
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabTitle="About us">
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
Object
default: undefined
An object with configuration that can be added on the <TabPanel /> children/tabs.
Avalable props are:
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => <div>
  <NotificationBoard id="board" />
  <TabPanel defaultActiveIndex={1}>
    <div tabProps={{ title: 'Home' }}>
      <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
      <p>
        Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
      </p>
      <p>
      We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
      </p>
      The toolkit contains:
      <ul>
        <li>Accordion</li>
        <li>Button</li>
        <li>CheckBox</li>
        <li>ColorPicker</li>
        <li>ComboBox</li>
        <li>DatePicker</li>
        <li>MaskedInput</li>
        <li>Menu</li>
        <li>Notification</li>
      </ul> and many other components.
    </div>
    <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
      content: '"Features" tab title clicked',
      style: { marginTop: 56 }
    })}}>
      When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
      <ul>
        <li>
          <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
        </li>
        <li>
          <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
        </li>
        <li>
          <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
        </li>
        <li>
          <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
        </li>
        <li>
          <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
        </li>
      </ul>
    </div>
    <div tabProps={{ title: 'About us', disabled: true }}>
      We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
    </div>
    <div tabTitle="Sign up">
      <h3>Sign-up form</h3>
      <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
      <form>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
        </label>

        <button>Sign me up!</button>
        <p style={{ fontStyle: 'italic' }}>
          Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
        </p>
      </form>
    </div>
  </TabPanel>
</div>
Bool
default: false
Specifies if the current tab is disabled.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => <div>
  <NotificationBoard id="board" />
  <TabPanel defaultActiveIndex={1}>
    <div tabProps={{ title: 'Home', disabled: true }}>
      <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
      <p>
        Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
      </p>
      <p>
      We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
      </p>
      The toolkit contains:
      <ul>
        <li>Accordion</li>
        <li>DatePicker</li>
        <li>MaskedInput</li>
        <li>Menu</li>
        <li>Notification</li>
      </ul> and many other components.
    </div>
    <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
      content: '"Features" tab title clicked',
      style: { marginTop: 56 }
    })}}>
      When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
      <ul>
        <li>
          <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
        </li>
        <li>
          <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
        </li>
        <li>
          <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
        </li>
        <li>
          <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
        </li>
        <li>
          <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
        </li>
      </ul>
    </div>
    <div tabProps={{ title: 'About us', disabled: true }}>
      We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
    </div>
    <div tabTitle="Sign up">
      <h3>Sign-up form</h3>
      <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
      <form>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
        </label>

        <button>Sign me up!</button>
        <p style={{ fontStyle: 'italic' }}>
          Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
        </p>
      </form>
    </div>
  </TabPanel>
</div>
React.Node
default: undefined
Specifies the contents of a tab title.
tabProps.title accomplishes the same thing as tabTitle.
Can be any valid React.Node.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

export default () =>  <div>
  <NotificationBoard id="board" />
  <TabPanel defaultActiveIndex={1}>
    <div tabProps={{ title: 'Home' }}>
      <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
      <p>
        Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
      </p>
      <p>
      We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
      </p>
      The toolkit contains:
      <ul>
        <li>Accordion</li>
        <li>DatePicker</li>
        <li>MaskedInput</li>
        <li>Menu</li>
        <li>Notification</li>
      </ul> and many other components.
    </div>
    <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
      content: '"Features" tab title clicked',
      style: { marginTop: 56 }
    })}}>
      When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
      <ul>
        <li>
          <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
        </li>
        <li>
          <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
        </li>
        <li>
          <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
        </li>
        <li>
          <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
        </li>
        <li>
          <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
        </li>
      </ul>
    </div>
    <div tabProps={{ title: 'About us' }}>
      We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
    </div>
    <div tabTitle="Sign up">
      <h3>Sign-up form</h3>
      <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
      <form>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
        </label>

        <button>Sign me up!</button>
        <p style={{ fontStyle: 'italic' }}>
          Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
        </p>
      </form>
    </div>
  </TabPanel>
</div>
Fn(stipProps)
default: undefined
Specifies a custom render function for tabs wrapper.
When the tabStripFactory returns undefined, the default rendering occurs. This can be useful when want to mutate and modify the default props - for example, when adding some custom styling, but still want the default rendering to occur.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

function tabStripFactory(tabProps) {
  tabProps.style = { background: 'rgb(196, 209, 232)' }
}

export default () => <TabPanel style={{ maxWidth: 800 }} tabStripFactory={tabStripFactory}>
  <div tabTitle="Home">
    <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
    <p>
      Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
    </p>
    <p>
    We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
    </p>
    The toolkit contains:
    <ul>
      <li>Accordion</li>
      <li>DatePicker</li>
      <li>MaskedInput</li>
      <li>Menu</li>
      <li>Notification</li>
    </ul> and many other components.
  </div>
  <div tabTitle="Features">
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    <ul>
      <li>
        <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
      </li>
      <li>
        <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
      </li>
      <li>
        <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
      </li>
    </ul>
  </div>
  <div tabTitle="About us">
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </div>
  <div tabTitle="Sign up">
    <h3>Sign-up form</h3>
    <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
    <form>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
      </label>

      <button>Sign me up!</button>
      <p style={{ fontStyle: 'italic' }}>
        Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
      </p>
    </form>
  </div>
</TabPanel>
React.Node
default: undefined
Specifies the contents of a tab title.
tabTitle accomplishes the same thing as tabProps.title.
Can be any valid React.Node.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

export default () =>  <TabPanel defaultActiveIndex={1} style={{height: 400}}>
<div tabTitle={<i>Home</i>}>
    <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
    <p>
      Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
    </p>
    <p>
    We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
    </p>
    The toolkit contains:
    <ul>
      <li>Accordion</li>
      <li>Button</li>
      <li>CheckBox</li>
      <li>ColorPicker</li>
      <li>ComboBox</li>
      <li>DatePicker</li>
      <li>MaskedInput</li>
      <li>Menu</li>
      <li>Notification</li>
    </ul> and many other components.
  </div>
  <div tabTitle={<i>Features</i>}>
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    <ul>
      <li>
        <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
      </li>
      <li>
        <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
      </li>
      <li>
        <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
      </li>
    </ul>
  </div>
  <div tabTitle="About us">
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </div>
  <div tabTitle="Sign up">
    <h3>Sign-up form</h3>
    <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
    <form>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
      </label>

      <button>Sign me up!</button>
      <p style={{ fontStyle: 'italic' }}>
        Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
      </p>
    </form>
  </div>
</TabPanel>
  
Bool
default: "false"
Whether to change active content with a transition.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { transition: false }
  }
  render() {
    return <div>
      <div style={{marginBottom: 10}}>
        <CheckBox
          checked={this.state.transition}
          onChange={(transition) => this.setState({ transition })}
        >
          transition
        </CheckBox>
      </div>
      <TabPanel
        style={{ maxWidth: 800 }}
        defaultActiveIndex={1}
        transition={this.state.transition}
      >
        <div tabTitle="Home">
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabTitle="Features">
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabTitle="About us">
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}
export default () => <App />
Bool
default: "false"
Whether tabs are rendered in vertical direction, this applies for tabPosition=left|right.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

const tabs = [
  { title: <i>My account</i> },
  { title: 'Settings' },
  { title: 'Contact form', disabled: true },
  { title: <i>Profile</i>}
]
class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      tabPosition: 'left',
      vertical: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20}}>
        <p>Choose the tab align:</p>
        <RadioButtonGroup radioValue={this.state.tabPosition} radioOptions={[
          { value: 'top', label: 'top' },
          { value: 'bottom', label: 'bottom' },
          { value: 'left', label: 'left' },
          { value: 'right', label: 'right' }
        ]}
          onChange={({checkedItemValue: tabPosition}) => {
            this.setState({
              tabPosition,
              vertical: this.state.vertical ?
                tabPosition === 'left' || tabPosition === 'right' :
                false
            })
          }}
        />
      </div>
      <div style={{ marginBottom: 20}}>
        <CheckBox checked={this.state.vertical}
          disabled={this.state.tabPosition == 'top' || this.state.tabPosition=='bottom'}
          onChange={(vertical) => this.setState({
            vertical
          })}
        >Vertical tabs (only available for left/right position)
        </CheckBox>
      </div>
      <TabPanel style={{ maxWidth: 800, maxHeight: 370 }} vertical={this.state.vertical} tabPosition={this.state.tabPosition}>
        <div tabTitle="Home">
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul>
        </div>
        <div tabTitle="Features">
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabTitle="About us">
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
Fn(activeIndex)
default: undefined
Called when activeIndex changes.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
class App extends React.Component {
  render() {
    return <div>
      <TabPanel
      onActivate={() => zippy.notification.first.addNotification({
        content: 'onActivate called',
        style: { marginTop: 56 }
      })}
      >
        <div tabTitle="User Experience">
          User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.[1] User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users.
        </div>
        <div tabTitle="User Interface">
          The user interface (UI), in the industrial design field of human–computer interaction, is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine from the human end, whilst the machine simultaneously feeds back information that aids the operators' decision-making process. Examples of this broad concept of user interfaces include the interactive aspects of computer operating systems, hand tools, heavy machinery operator controls, and process controls. The design considerations applicable when creating user interfaces are related to or involve such disciplines as ergonomics and psychology.
        </div>
      </TabPanel>
      <NotificationBoard id="first" />
    </div>
  }
}

export default () => <App />
Fn(index)
default: undefined
Called when a tab's closing icon is clicked.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
class App extends React.Component {
  render() {
    return <div>
      <TabPanel
        closeable
        onCloseTab={() => zippy.notification.first.addNotification({
          content: 'onCloseTab called',
          style: { marginTop: 56 }
        })}
      >
        <div tabTitle="User Experience">
          User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.[1] User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users.
        </div>
        <div tabTitle="User Interface">
          The user interface (UI), in the industrial design field of human–computer interaction, is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine from the human end, whilst the machine simultaneously feeds back information that aids the operators' decision-making process. Examples of this broad concept of user interfaces include the interactive aspects of computer operating systems, hand tools, heavy machinery operator controls, and process controls. The design considerations applicable when creating user interfaces are related to or involve such disciplines as ergonomics and psychology.
        </div>
      </TabPanel>
      <NotificationBoard id="first" />
    </div>
  }
}
export default () => <App />
String
default: undefined
A css className to be appended to the Panel component.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

export default () => <TabPanel className="global-tabpanel-red-dotted-border">
  <div tabTitle="Home">
    <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
    <p>
      Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
    </p>
    <p>
      We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
    </p>
    The toolkit contains:
    <ul>
      <li>Accordion</li>
      <li>DatePicker</li>
      <li>MaskedInput</li>
      <li>Menu</li>
      <li>Notification</li>
    </ul> and many other components.
  </div>
  <div tabTitle="Features">
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    <ul>
      <li>
        <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
      </li>
      <li>
        <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
      </li>
      <li>
        <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
      </li>
    </ul>
  </div>
  <div tabTitle="About us">
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </div>
  <div tabTitle="Sign up">
    <h3>Sign-up form</h3>
    <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
    <form>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
      </label>

      <button>Sign me up!</button>
      <p style={{ fontStyle: 'italic' }}>
        Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
      </p>
    </form>
  </div>
</TabPanel>
String
default: undefined
A custom className to the content of all tabs.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import './index.global.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      customClass: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.customClass}
          onChange={(customClass) => this.setState({ customClass })}
        >
          Custom className
        </CheckBox>
      </div>
      <TabPanel contentClassName={this.state.customClass ? "tab-panel-content" : null}>
        <div tabTitle="Home">
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabTitle="Features">
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabTitle="About us">
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
Object
default: undefined
A custom style to the content of all tabs.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

const customStyle = {
  background: '#d9d9d9',
  border: '1px solid black',
  padding: '10px',
  borderRadius: '5px'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      styling: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.styling}
          onChange={(styling) => this.setState({ styling })}
        >
          Custom style
        </CheckBox>
      </div>
      <TabPanel contentStyle={this.state.styling ? customStyle : null}>
        <div tabTitle="Home">
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabTitle="Features">
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabTitle="About us">
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
Object
default: undefined
A style object applied to the Panel component.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

export default () => <TabPanel style={{ maxWidth: 800, border: '1px dotted red' }}>
  <div tabTitle="Home">
    <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
    <p>
      Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
    </p>
    <p>
      We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
    </p>
    The toolkit contains:
    <ul>
      <li>Accordion</li>
      <li>DatePicker</li>
      <li>MaskedInput</li>
      <li>Menu</li>
      <li>Notification</li>
    </ul> and many other components.
  </div>
  <div tabTitle="Features">
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    <ul>
      <li>
        <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
      </li>
      <li>
        <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
      </li>
      <li>
        <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
      </li>
    </ul>
  </div>
  <div tabTitle="About us">
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </div>
  <div tabTitle="Sign up">
    <h3>Sign-up form</h3>
    <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
    <form>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
      </label>

      <button>Sign me up!</button>
      <p style={{ fontStyle: 'italic' }}>
        Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
      </p>
    </form>
  </div>
</TabPanel>
String
default: undefined
Specifies a className to an active tab.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import './index.global.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      customActiveClass: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.customActiveClass}
          onChange={(customActiveClass) => this.setState({ customActiveClass })}
        >
          Custom active tab className
        </CheckBox>
      </div>
      <NotificationBoard id="board" />
      <TabPanel tabActiveClassName={this.state.customActiveClass ? "tab-panel-active" : null}>
        <div tabProps={{ title: 'Home' }}>
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
          content: '"Features" tab title clicked',
          style: { marginTop: 56 }
        })}}>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabProps={{ title: 'About us', disabled: true }}>
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
Object
default: undefined
Specifies a style to an active tab.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      customActiveStyle: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.customActiveStyle}
          onChange={(customActiveStyle) => this.setState({ customActiveStyle })}
        >
          Custom active tab style
        </CheckBox>
      </div>

      <NotificationBoard id="board" />

      <TabPanel tabActiveStyle={this.state.customActiveStyle ? { background: '#c9c9da', color: '#f75353' } : null}>
        <div tabProps={{ title: 'Home' }}>
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
          content: '"Features" tab title clicked',
          style: { marginTop: 56 }
        })}}>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabProps={{ title: 'About us', disabled: true }}>
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
String
default: undefined
A custom className applied to the tab body content.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

export default () => <TabPanel
  style={{ maxWidth: 800 }}
  tabBodyClassName="global-tabpanel-blue-bg"
>
  <div tabTitle="Home">
    <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
    <p>
      Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
    </p>
    <p>
    We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
    </p>
    The toolkit contains:
    <ul>
      <li>Accordion</li>
      <li>DatePicker</li>
      <li>MaskedInput</li>
      <li>Menu</li>
      <li>Notification</li>
    </ul> and many other components.
  </div>
  <div tabTitle="Features">
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    <ul>
      <li>
        <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
      </li>
      <li>
        <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
      </li>
      <li>
        <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
      </li>
    </ul>
  </div>
  <div tabTitle="About us">
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </div>
  <div tabTitle="Sign up">
    <h3>Sign-up form</h3>
    <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
    <form>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
      </label>

      <button>Sign me up!</button>
      <p style={{ fontStyle: 'italic' }}>
        Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
      </p>
    </form>
  </div>
</TabPanel>
Object
default: undefined
A custom style applied to the tab body content.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import '@zippytech/react-toolkit/TabPanel/index.css'

export default () => <TabPanel
  style={{ maxWidth: 800 }}
  tabBodyStyle={{ color: 'blue', padding: 50}}
>
  <div tabTitle="Home">
    <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
    <p>
      Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
    </p>
    <p>
    We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
    </p>
    The toolkit contains:
    <ul>
      <li>Accordion</li>
      <li>DatePicker</li>
      <li>MaskedInput</li>
      <li>Menu</li>
      <li>Notification</li>
    </ul> and many other components.
  </div>
  <div tabTitle="Features">
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    <ul>
      <li>
        <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
      </li>
      <li>
        <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
      </li>
      <li>
        <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
      </li>
    </ul>
  </div>
  <div tabTitle="About us">
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </div>
  <div tabTitle="Sign up">
    <h3>Sign-up form</h3>
    <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
    <form>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
      </label>
      <label style={{ display: 'block', margin: 10 }}>
        <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
      </label>

      <button>Sign me up!</button>
      <p style={{ fontStyle: 'italic' }}>
        Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
      </p>
    </form>
  </div>
</TabPanel>
String|Fn(tabProps)
default: undefined
Specifies a className to a tab.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import './index.global.css'

export default () => <div>
  <NotificationBoard id="board" />
  <TabPanel
    tabClassName={(tabProps) => {
      if (tabProps.active) {
        return className="tab-panel-active"
      }
      if (tabProps.disabled) {
        return className="tab-panel-disabled"
      }
      if (tabProps.index == 1) {
        return className="tab-panel-class"
      }
    }}
  >
    <div tabProps={{ title: 'Home' }}>
      <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
      <p>
        Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
      </p>
      <p>
      We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
      </p>
      The toolkit contains:
      <ul>
        <li>Accordion</li>
        <li>Button</li>
        <li>CheckBox</li>
        <li>ColorPicker</li>
        <li>ComboBox</li>
        <li>DatePicker</li>
        <li>MaskedInput</li>
        <li>Menu</li>
        <li>Notification</li>
      </ul> and many other components.
    </div>
    <div tabProps={{ title: "Features", onClick: () => zippyui.notificatin.board.addNotification({
      content: '"Features" tab title clicked',
      style: { marginTop: 56 }
    })}}>
      When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
      <ul>
        <li>
          <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
        </li>
        <li>
          <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
        </li>
        <li>
          <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
        </li>
        <li>
          <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
        </li>
        <li>
          <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
        </li>
      </ul>
    </div>
    <div tabProps={{ title: 'About us', disabled: true }}>
      We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
    </div>
    <div tabTitle="Sign up">
      <h3>Sign-up form</h3>
      <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
      <form>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
        </label>
        <label style={{ display: 'block', margin: 10 }}>
          <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
        </label>

        <button>Sign me up!</button>
        <p style={{ fontStyle: 'italic' }}>
          Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
        </p>
      </form>
    </div>
  </TabPanel>
</div>
String
default: undefined
Specifies a className to a disabled tab.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import './index.global.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      customDisabledClass: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.customDisabledClass}
          onChange={(customDisabledClass) => this.setState({ customDisabledClass })}
        >
          Custom disabled tab className
        </CheckBox>
      </div>
      <NotificationBoard id="board" />
      <TabPanel tabDisabledClassName={this.state.customDisabledClass ? "tab-panel-disabled" : null}>
        <div tabProps={{ title: 'Home' }}>
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
          content: '"Features" tab title clicked',
          style: { marginTop: 56 }
        })}}>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabProps={{ title: 'About us', disabled: true }}>
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
Object
default: undefined
Specifies a style to a disabled tab.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      customDisabledStyle: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.customDisabledStyle}
          onChange={(customDisabledStyle) => this.setState({ customDisabledStyle })}
        >
          Custom disabled tab style
        </CheckBox>
      </div>

      <NotificationBoard id="board" />

      <TabPanel tabDisabledStyle={this.state.customDisabledStyle ? { background: 'gray', color: 'black' } : null}>
        <div tabProps={{ title: 'Home' }}>
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabProps={{ title: "Features", onClick: () => zippy.notification.board.addNotification({
          content: '"Features" tab title clicked',
          style: { marginTop: 56 }
        })}}>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabProps={{ title: 'About us', disabled: true }}>
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />
Object|Func(tabProps)
default: undefined
A custom style for all tab titles in the <TabPanel />.
For complete extensibility, this can also be specified as a function and return a style dynamically based on tabProps.
import React from 'react'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      tabAlign: 'start',
      tabEllipsis: true,
      customTabStyle: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20}}>
        <CheckBox checked={this.state.customTabStyle}
          onChange={(customTabStyle) => {
            this.setState({
              customTabStyle
            })
          }}
        >
          Custom tab style (width: 150, color: red)
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20}}>
        <p>Choose the tab align:</p>
        <RadioButtonGroup radioValue={this.state.tabAlign} radioOptions={[
          { value: 'start', label: 'start' },
          { value: 'center', label: 'center' },
          { value: 'end', label: 'end' },
          { value: 'stretch', label: 'stretch' },
          { value: 'space-around', label: 'space-around' },
          { value: 'space-between', label: 'space-between' }
        ]}
          onChange={({checkedItemValue: tabAlign}) => this.setState({
            tabAlign
          })}
        />
      </div>
      <div style={{ marginBottom: 20}}>
        <CheckBox checked={this.state.tabEllipsis}
          onChange={(tabEllipsis) => {
            this.setState({
              tabEllipsis
            })
          }}
        >
          Show ellipsis on overflowing tabs
        </CheckBox>
      </div>
      <TabPanel style={{ maxWidth: 800 }} tabAlign={this.state.tabAlign}
        tabEllipsis={this.state.tabEllipsis}
        tabStyle={this.state.customTabStyle ? { color: 'red', width: 150} : null}
      >
        <div tabTitle="Home is where your heart is!">
          <h4>Zippytech React Toolkit - Carefully crafted components made with ReactJS.</h4>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.
          </p>
          <p>
          We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and help you speed-up app development.
          </p>
          The toolkit contains:
          <ul>
            <li>Accordion</li>
            <li>DatePicker</li>
            <li>MaskedInput</li>
            <li>Menu</li>
            <li>Notification</li>
          </ul> and many other components.
        </div>
        <div tabTitle="Features">
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
            </li>
            <li>
              <b>Simplicity</b> - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
            </li>
            <li>
              <b>Look & feel</b> - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
            </li>
            <li>
              <b>Theming</b> - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.
            </li>
            <li>
              <b>Functionality</b> - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.
            </li>
          </ul>
        </div>
        <div tabTitle="About us">
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </div>
        <div tabTitle="Sign up">
          <h3>Sign-up form</h3>
          <p>If you wish to know more about our components, and future developments, sign up to our newsletter.</p>
          <form>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray' }} type="text" placeholder="Name"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="text" placeholder="Surname"/>
            </label>
            <label style={{ display: 'block', margin: 10 }}>
              <input style={{ padding: 5, borderRadius: 3, border: '1px solid gray'}} type="email" placeholder="Email"/>
            </label>

            <button>Sign me up!</button>
            <p style={{ fontStyle: 'italic' }}>
              Note: this sign-up form is not signin you up for our newsletter - it's just a dummy presentational form.
            </p>
          </form>
        </div>
      </TabPanel>
    </div>
  }
}

export default () => <App />