Top
Accordion API - API
Accordion API
Props (30)
Callback Props (3)
Styling Props (11)
Methods (4)
Bool
default: false
Controls whether to activate the tab on keyboard navigation focus or not. If false, the Enter key needs to be pressed to confirm the activation.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/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 = { enableKeyboardNav: true, activateOnFocus: false }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableKeyboardNav}
          onChange={(enableKeyboardNav) => this.setState({ enableKeyboardNav })}
        >
          Enable keyboard navigation
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.activateOnFocus}
          onChange={(activateOnFocus) => this.setState({ activateOnFocus })}
        >
          Activate on focus
        </CheckBox>
      </div>
      <Accordion
        enableKeyboardNavigation={this.state.enableKeyboardNav}
        activateOnFocus={this.state.activateOnFocus}
        defaultActiveIndex={2} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Number|Number[]
default: 0
Controlled version of defaultActiveIndex. User interaction will trigger onActivate(activeIndex), which you should use to update the value of this prop accordingly.
Changing the value for activeIndex dynamically (from outside the component) will expand/collapse tabs accordingly.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeIndex: null }
  }
  render() {
    return <div>
      <p>
        Currently active index: {this.state.activeIndex == null ? 'none' : this.state.activeIndex}.
      </p>
      <Accordion activeIndex={this.state.activeIndex} onActivate={(activeIndex) => this.setState({ activeIndex })} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
String|React.Node|Array|Object
default: undefined
You can use any React components as children for the accordion and they will get rendered as accordion tabs.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

const firstTab = (
  <div tabTitle="Home">
    Home
  </div>
);

const secondTab = (
  <div tabTitle="Features">
    Features
  </div>
);

const thirdTab = (
  <div tabTitle="My account">
    My account
  </div>
);

const fourthTab = (
  <div tabTitle="About us">
    About us
  </div>
);

const fifthTab = (
  <div tabTitle="Sign up">
    Sign up
  </div>
);

const accordionChildrens = [
  firstTab,
  secondTab,
  thirdTab,
  fourthTab,
  fifthTab
]

export default () => <Accordion
  style={{ maxWidth: 800, height: 400 }}
  children={accordionChildrens}
/>
Bool
default: false
Allows collapsing all opened tabs, if set to true. If falsy, the last opened tab won't be collapsible.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/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 = { collapsible: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.collapsible}
        onChange={(collapsible) => this.setState({ collapsible })}
      >Collapsible</CheckBox>
      <p>When collapsible is <code>true</code>, you can click the expanded tab to collapse it.
      </p>
      <Accordion collapsible={this.state.collapsible} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Number|Number[]
default: 0
Specifies the default active tab. Specifying null will disable expanded tabs on first render allowing <Accordion />instances that mount completely collapsed by default.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

const accordion = <div>
  <Accordion defaultActiveIndex={1} style={{height: 280}}>
    <div tabTitle="Overview">
      Overview
    </div>

    <div tabProps={{ title: 'Docs' }}>
      Docs
    </div>

    <div tabProps={{ title: 'Features' }}>
      Features
    </div>

    <div tabTitle={() => 'Themes' }>
      Themes
    </div>
  </Accordion>
</div>

export default () => accordion
If the <Accordion /> is in multiExpand mode, an array should be provided. If in single mode, just a number.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

const accordion = <Accordion defaultActiveIndex={[0, 1]} multiExpand>
  <div tabTitle="Overview">
    Overview
  </div>

  <div tabProps={{ title: 'Docs' }}>
    Docs
  </div>

  <div tabProps={{ title: 'Features' }}>
    Features
  </div>

  <div tabTitle={() => 'Themes' }>
    Themes
  </div>
</Accordion>

export default () => accordion
Bool
default: true
Controls the ability to interact with the accordion with the keyboard.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/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 = { enableKeyboardNav: true }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.enableKeyboardNav}
        onChange={(enableKeyboardNav) => this.setState({ enableKeyboardNav })}
      >
        enableKeyboardNavigation
      </CheckBox>
      <p>When enableKeyboardNav is <code>true</code>, no action can be performed on a tab.
      </p>
      <Accordion enableKeyboardNavigation={this.state.enableKeyboardNav} defaultActiveIndex={2} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Bool
default: false
If true, it will only trigger expand/collapse on click on the expandTool, and nowhere else in the title bar.
Don't use this in combination with expandTool={null}
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/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 = { expandOnToolOnly: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.expandOnToolOnly}
        onChange={(expandOnToolOnly) => this.setState({ expandOnToolOnly })}
      >
        expandOnToolOnly
      </CheckBox>
      <p>When expandOnToolOnly is <code>true</code>, the tab will collapse or expand only on click on the expand tool.
      </p>
      <Accordion expandOnToolOnly={this.state.expandOnToolOnly} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
String|React.Node|Fn|null
default: undefined
The expandTool prop specifies what to render for the expand tool. By default, the <Accordion /> will use its internal function to render and animate the tool.
You can choose to not render the expandTool by specifying expandTool=null.
Any valid React.Node can be used as an expandTool.
The expandTool can also be a function - in which case, it will be called with an object that has the following properties:
  • expanded - boolean, if the tab title containing the current expand tool is expanded or not
  • index - number, index of the current tab title
  • activeIndex - number || array(number), what other tabs are active right now. This will always exist, even if the <Accordion /> does not have an activeIndex set. It will represent the currently expanded tabs.
  • disabled - boolean if the tab is disabled or not.
  • multiExpand - boolean if the <Accordion /> is in multiExpand mode or not.
  • collapsible - boolean if the <Accordion /> is collapsible.
  • focused - boolean if the tab title is focused.
  • transition - boolean if the animation is enabled.
  • transitionDuration - number number the animation duration in ms.
  • transitionFunction - string string the animation transition function.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

const defaultRenderExpandTool = (params) => {
  const EXPAND_TOOL_SIZE = 24;
  let style = {
    width:EXPAND_TOOL_SIZE,
    height:EXPAND_TOOL_SIZE,
    transition: params.transition ? `all 300ms ease` : '',
    transform: params.expanded ?'rotate(180deg)':'rotate(0deg)'
  }
  return (
    <div style={style}>
      <svg fill="#dc1b1b" width={EXPAND_TOOL_SIZE} height={EXPAND_TOOL_SIZE} viewBox="0 0 24 24">
        <path d="M7 10l5 5 5-5z"/>
        <path d="M0 0h24v24H0z" fill="none"/>
      </svg>
    </div>
  )
}
class App extends React.Component {
  render() {
    return <div>
      <Accordion expandTool={defaultRenderExpandTool} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
String
default: "end"
Will configure the position of the expandTool in relation to the title content. Uses flexbox for layout. Valid values are "start" and "end"
This prop behaviour is influenced by the value of rtl prop.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

const dataSource = ['start', 'end'].map((item) => {
  return {
    id: item,
    label: item
  }
})

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { position: 'end' }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Position: <ComboBox
          inlineFlex
          collapseOnSelect
          changeValueOnNavigation
          dataSource={dataSource}
          value={this.state.position}
          onChange={(value) => this.setState({ position: value })}
        />
      </div>
      <Accordion expandToolPosition={this.state.position} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}
export default () => <App />
Bool
default: false
By default the <Accordion /> will render vertically, so tabs will be arranged one under the other. Setting horizontal=true, will change the layout and flow of the <Accordion />. Instead of rendering the tabs one under the other, the <Accordion /> will layout each tab side by side and will also rotate the tab titles to titleRotate degrees.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/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 = { horizontal: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.horizontal}
        onChange={(horizontal) => this.setState({ horizontal })}
      >horizontal</CheckBox>
      <p>When horizontal is <code>true</code>, the orientation of the accordion will change.</p>

      <Accordion horizontal={this.state.horizontal} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Bool
default: false
If set to true will prevent any interaction on tabs. It won't even call onActivate . Tabs can overwrite this. If a tab has the locked=false or tabProps={locked: false}, that individual tab will still work.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/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 = { locked: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.locked}
        onChange={(locked) => this.setState({ locked })}
      >locked</CheckBox>
      <p>When locked is <code>true</code>, no action can be performed on a tab.
      </p>
      <Accordion style={{ height: 350 }} locked={this.state.locked}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Bool
default: false
Setting multiExpand=true will allow expanding more than one tab at once. While in this mode, the layout will NOT stretch to full height/width of the parent.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/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 = { multiExpand: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.multiExpand}
        onChange={(multiExpand) => this.setState({ multiExpand })}
      >multiExpand</CheckBox>
      <p>When multiExpand is <code>true</code>, you can expanded multiple tabs.
      </p>
      <div style={{ marginBottom: 20 }}>
        <Accordion multiExpand={this.state.multiExpand}>
          <div tabTitle="Overview">
            Overview
          </div>

          <div tabProps={{ title: 'Docs' }}>
            Docs
          </div>

          <div tabProps={{ title: 'Features' }}>
            Features
          </div>

          <div tabTitle={() => 'Themes' }>
            Themes
          </div>
        </Accordion>
      </div>
    </div>
  }
}

export default () => <App />
Fn
default: undefined
Providing the renderTabTitle prop, will delegate the rendering of each tab title content to this function. This function gets all the necesary DOM props in order to render the content with a simple <div {...domProps}/> and a secondary parameter containing the tabProps, with the following properties:
  • expanded - boolean, if the tab is expanded or not
  • index - number, index of the current tab
  • activeIndex - number || array(number), what other tabs are active right now. This will always exist, even if the <Accordion /> does not have an activeIndex set. It will represent the currently expanded tabs.
  • disabled - boolean if the tab is disabled or not.
  • multiExpand - boolean if the <Accordion /> is in multiExpand mode or not.
  • collapsible - boolean if the <Accordion /> is collapsible.
  • focused - boolean if the tab title is focused.
  • transition - boolean if the animation is enabled.
  • transitionDuration - number number the animation duration in ms.
  • transitionFunction - string string the animation transition function.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  customRenderTabTitle(domProps, tabProps){
    console.log(domProps); // will contain children (the tab content) and className and ref
    console.log(tabProps); // will contain details about this tab and the state of the accordion
    return <div {...domProps}>My custom tab title function - index {tabProps.index}</div>;
  }
  render() {
    return <div>
      <Accordion style={{height: 350}} renderTabTitle={this.customRenderTabTitle}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Bool
default: false
Enables rtl (right-to-left) mode. When rtl=false, tabTitleAlign='start' means tab titles are aligned to the left. When rtl=true, tabTitleAlign='start' means tab titles are aligned to the right. Similarly, for expandToolPosition. When rtl=false, expandToolPosition='start' means the expandTool is positioned to the left of the tab title. When rtl=true, expandToolPosition='start' means the expandTool is positioned to the right of the tab title.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/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 = { rtl: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.rtl}
        onChange={(rtl) => this.setState({ rtl })}
      >rtl</CheckBox>
      <p>When rtl is <code>true</code>, it will change the accordion's align from right to left.
      </p>
      <Accordion rtl={this.state.rtl} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Bool
default: false
Passing true, will make the contents of the <Accordion /> show scrollbars, and not the <Accordion /> content wrapper. More specifically, this means that in the example below, where we have a TabPanel rendered in the first <Accordion /> tab, the <TabPanel /> will show scrollbars when necessary, not the <Accordion />.
When scrollTabContent=true, the component rendered as the tab contents is responsible for using overflow: auto so that it properly renders a scrollbar when needed.
Defaults to false, which shows scrollbars in the <Accordion /> content wrapper when the contents of the <Accordion /> tab do not fit inside.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import TabPanel from '@zippytech/react-toolkit/TabPanel'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Accordion/index.css'
import '@zippytech/react-toolkit/TabPanel/index.css'
import '@zippytech/react-toolkit/CheckBox/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>
        <p>
          Make sure you are on a tab that needs scrollbars to show all contents.
        </p>
      </div>
      <Accordion style={{ height: 450, maxWidth: 800 }} scrollTabContent={this.state.scrollTabContent}>
        <CustomComponent tabProps={{ title: 'Overview' }} />
        <MyContainer tabProps={{ title: 'Features' }}>
          {myContainerContent}
        </MyContainer>
        <div tabTitle={()=>('Images')}>
          <p>Images are easy to embed - just use jsx as usual.</p>
          <img src='https://loremflickr.com/320/200/dog' alt='image'/>
        </div>
      </Accordion>
    </div>
  }
}

class CustomComponent extends React.Component {
  render() {
    return <TabPanel style={{maxWidth: 800}}>
    <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>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="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">
      About us
    </div>
    <div tabTitle="Sign up">
      Sign up
    </div>
  </TabPanel>
  }
}

const MyContainer = (props) => <div style={{ overflow: 'auto', padding: 20, border: '1px dotted gray'}}>
  <p>This is MyContainer component</p>
  {props.children}
</div>

const myContainerContent = <div>
  <p>
    Performance - 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.
    Simplicity - 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.
    Look & feel - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:
    Theming - 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.
  </p>
  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>

export default () => <App />
Bool
default: false
This prop controls whether to show a tooltip, which contains the tab title, when the title bar is hovered.
The tooltip will appear only if the title is a string.
import React from 'react'

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

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

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showTooltip: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.showTooltip}
        onChange={(showTooltip) => this.setState({ showTooltip })}
      >showTooltip</CheckBox>
      <p>When showTooltip is <code>true</code>, you can hover the title bar whether to show the tooltip.</p>
      <Tooltip target="[data-tooltip]" />

      <Accordion showTooltip={this.state.showTooltip} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle='Themes'>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Object
default: undefined
tabProps can be declared on each individual tab instance and overwrite the props declared on at the <Accordion /> level. Styling each individual tab will merge styles and concatenate classes with the props coming from the <Accordion />.tabProps supports the following params:
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  render() {
    return <Accordion tabTitleVerticalAlign={'top'} tabTitleStyle={{ height: 50 }}>
      <div
        tabTitle="Overview"
        tabProps={{
          titleVerticalAlign: 'bottom',
          locked: true
        }}>
      Overview
    </div>

    <div tabProps={{
      title: 'Docs'
    }}>
      Docs
    </div>

    <div tabProps={{
      title: 'Features'
    }}>
      Features
    </div>

    <div tabTitle={() => 'Themes' }>
      Themes
    </div>
  </Accordion>
  }
}

export default () => <App />
Bool
default: false
Indicates if the tab is disabled or not
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

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

    this.state = {
      disabled: false
    }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.disabled}
          onChange={disabled => this.setState({ disabled })}
        >
          Disabled
        </CheckBox>
      </div>
      <Accordion defaultActiveIndex={1} style={{ height: 350 }}>
        <div
            tabTitle="Overview"
            tabProps={{
              disabled: this.state.disabled
            }}
        >
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Bool
default: false
Indicates if the tab is locked or not
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

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

    this.state = {
      locked: false
    }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.locked}
          onChange={locked => this.setState({ locked })}
        >
          Locked
        </CheckBox>
      </div>
      <Accordion defaultActiveIndex={1} style={{ height: 350 }}>
        <div
          tabTitle={this.state.locked ? "Overview - locked" : "Overview"}
          tabProps={{
            locked: this.state.locked
          }}
        >
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Bool
default: false
Forces the content to have the size of the wrapper. Will overwrite top level stretchTabContent
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Accordion/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 })}
        >
          stretchTabContent
        </CheckBox>
      </div>
      <Accordion style={{height: 500}} stretchTabContent={this.state.stretchTabContent}>
        <div
            tabTitle="Overview"
            style={{background: '#9bf182'}}
        >
          <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.
            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.
            We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
          </p>
        </div>

        <div
          tabTitle="Docs"
          style={{ background: '#b982f1' }}
          tabProps={{
            style: { padding: 20 },
            stretchTabContent: this.state.stretchTabContent
          }}>
          <h2>Docs navigation</h2>
          <p>You can navigate this documentation either by using the side menu on the left, or the next/prev links below, or you can press the n key (from next) or the p key (from prev) to navigate to the next/prev page in the docs.</p>
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
React.Node|Fn
default: undefined
Use this to specify the title for the tab instead of the default tabTitle prop.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

import './index.global.css'

class App extends React.Component {
  render() {
    return <div>
      <Accordion style={{height:300}}>
        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div
          tabTitle="Overview"
          tabProps={{
            className: 'accordion-custom-class'
          }}
        >
          Overview
        </div>
       </Accordion>
    </div>
  }
}

export default () => <App />
String
default: undefined
Specifies the text alignment of the title on the horizontal axis. Will overwrite tabTitleAlign.
Possible values:
  • "start"
  • "center"
  • "end"
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

const dataSource = ['start', 'center', 'end'].map((item) => {
  return {
    id: item,
    label: item
  }
})

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

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

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Title align: <ComboBox
          inlineFlex
          collapseOnSelect
          changeValueOnNavigation
          dataSource={dataSource}
          value={this.state.titleAlign}
          onChange={(value) => this.setState({ titleAlign: value })}
        />
      </div>
      <Accordion style={{height:300}} tabTitleAlign="center">
        <div
            tabTitle="Overview"
            tabProps={{
              titleAlign: this.state.titleAlign
            }}
        >
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Bool
default: true
Will make the tab title show an ellipsis, if set to true. Will overwrite tabTitleEllipsis.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

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

    this.state = {
      titleEllipsis: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.titleEllipsis}
          onChange={(titleEllipsis) => this.setState({ titleEllipsis })}
        >
          Title ellipsis
        </CheckBox>
      </div>
      <Accordion style={{ height: 400, width: 400 }}>
        <div
            tabProps={{
              title: 'Overview. Longer title than usual. ippy 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.',
              titleEllipsis: this.state.titleEllipsis
            }}
        >
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Object
default: undefined
A style object to be used for the title of the tab. Will be merged with the tabTitleStyle prop.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  render() {
    return <div>
      <Accordion style={{height:300}}>
        <div
            tabTitle="Overview"
            tabProps={{
              titleStyle: {
                padding: 20,
                color: 'red'
              }
            }}
          >
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
String
default: undefined
Specifies the alignment the text of the title on the vertical axis. Will overwrite tabTitleVerticalAlign.
Possible values:
  • "top"
  • "middle"
  • "bottom"
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

const dataSource = ['top', 'middle', 'bottom'].map((item) => {
  return {
    id: item,
    label: item
  }
})

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

    this.state = {
      verticalAlign: 'middle'
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
      Title vertical align: <ComboBox
        inlineFlex
        collapseOnSelect
        changeValueOnNavigation
        dataSource={dataSource}
        value={this.state.verticalAlign}
        onChange={(value) => this.setState({ verticalAlign: value })}
      />
      </div>
      <Accordion style={{height:300}} tabTitleStyle={{ height: 50 }} tabTitleVerticalAlign="middle">
        <div
            tabTitle="Overview"
            tabProps={{
              titleVerticalAlign: this.state.verticalAlign
            }}
        >
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
       </Accordion>
    </div>
  }
}

export default () => <App />
React.Node|Fn
default: undefined
Specifies what to render for the title of the tab.
It can also be a function, so you can access the tabProps object when rendering the tabTitle.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  render() {
    return <div>
      <Accordion style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={({ expanded }) => 'Themes ' + (expanded? 'expanded': 'collapsed') }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
90|-90
default: -90
Specifies the rotation of the tab title. Available values are:
  • 90
  • -90
The tabTitleRotate prop will work only with horizontal set to true.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      horizontal: true,
      rotation: -90,
      rtl: false
    }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.horizontal}
          onChange={(horizontal) => this.setState({ horizontal })}
        >horizontal</CheckBox>{' '}
        <CheckBox
          checked={this.state.rtl}
          onChange={(rtl) => this.setState({ rtl })}
        >right-to-left</CheckBox>
        <div>
          Tab title rotation: <ComboBox
            inlineFlex
            changeValueOnNavigation
            collapseOnSelect
            dataSource={[
              { id: 90, label: '90deg' },
              { id: -90, label: '-90deg' }
            ]}
            value={this.state.rotation}
            onChange={(value) => this.setState({ rotation: value })}
          />
        </div>
      </div>
      <Accordion
        style={{ height: 350 }}
        horizontal={this.state.horizontal}
        rtl={this.state.rtl}
        tabTitleRotate={this.state.rotation}
      >
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Bool
default: true
Transition props specifiy the animation parameters of both the collapse/expand transition of the tabs, as well as the rotation of the arrows of the tab titles. Whentransition=true, the transitionDuration and transitionFunction props will control the animation.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/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: true }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.transition}
          onChange={(transition) => this.setState({ transition })}
        >transition</CheckBox>
      </div>
      <Accordion transition={this.state.transition} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Number
default: 300
Specifies the duration in miliseconds (css transition-duration prop) for the expand/collapse animation.
Only makes sense when transition=true.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

const dataSource = [100, 350, 500, 1500, 3000].map((item) => {
  return {
    id: item,
    label: item + 'ms'
  }
})

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { duration: 300 }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Duration: <ComboBox
          inlineFlex
          changeValueOnNavigation
          collapseOnSelect
          dataSource={dataSource}
          value={this.state.duration}
          onChange={(value) => this.setState({ duration: value })}
        />
      </div>
      <Accordion transitionDuration={this.state.duration} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
String
default: "ease"
Specifies the transition-timing function CSS property. Can be any valid transition string (like ease-in-out, linear or custom cubic-bezier curve).
Only makes sense when transition=true.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

const dataSource = ['ease', 'ease-in-out', 'linear'].map((item) => {
  return {
    id: item,
    label: item
  }
})

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { transitioinFunction: 'ease' }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Transition function: <ComboBox
          inlineFlex
          changeValueOnNavigation
          collapseOnSelect
          dataSource={dataSource}
          value={this.state.transitioinFunction}
          onChange={(value) => this.setState({ transitioinFunction: value })}
        />
      </div>
      <Accordion transitionFunction={this.state.transitioinFunction} transitionDuration={1000} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Fn(activeIndex: Number)
default: undefined
Will be called immediately when a tab title has been activated - either via click or keyboard navigation. activeIndex will be a number when in single expand mode (multiExpand=false). When multiExpand=true, activeIndex will be an array of indexes that are active. The callback will get called even in controlled mode, when activeIndex is set. In multiExpand mode, the last tab in the array is the last activated index.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { activeIndex: 0 }
  }
  render() {
    return <div>
      <p>Currently active index: {this.state.activeIndex}.
      </p>
      <Accordion onActivate={ activeIndex => this.setState({ activeIndex })} style={{ minHeight: 350 }} >
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Fn(index: Number)
default: undefined
Called when a tab has completed the collapse animation. It will get called when transition=false imediately when the tab gets expanded. Does not trigger in controlled mode. index is the position the tab has in the list of tabs of the <Accordion />.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { collapsedIndex: null }
  }
  render() {
    return <div>
      <p>Last collapsed tab: {this.state.collapsedIndex == null ? 'none' : this.state.collapsedIndex}.
      </p>
      <Accordion onCollapse={ collapsedIndex => this.setState({ collapsedIndex })} style={{ height: 350 }} >
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
You also have the ability to register onCollapse on each individual tab via the tabProps property.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
const showNotification = () => {
  zippy.notification.first.addNotification({
    title: 'Second tab collapsed',
    content: <p>This happend because you collapsed the second tab!</p>,
    style: { marginTop: 56 }
  });
}
class App extends React.Component {
  render() {
    return <div>
      <NotificationBoard id="first" />
      <Accordion style={{height: 350}}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{
          title: 'Docs',
          onCollapse: showNotification
        }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Fn(index: Number)
default: undefined
Called when a tab has completed the expand animation. It will get called when transition=false imediately when the tab gets expanded. Does not trigger in controlled mode. index is the position the tab has in the list of tabs of the <Accordion />.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { expandedIndex: null }
  }
  render() {
    return <div>
      <p>Currently expanded index: {this.state.expandedIndex == null ? 'none' : this.state.expandedIndex}.
      </p>
      <Accordion onExpand={ expandedIndex => this.setState({ expandedIndex })} style={{ height: 350 }} >
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
You also have the ability to register onExpand on each individual tab via the tabProps property.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

const showNotification = () => {
  zippy.notification.first.addNotification({
    title: 'Second tab expanded',
    content: <p>This happend because you expanded the second tab!</p>,
    style: { marginTop: 56 }
  });
}

class App extends React.Component {
  render() {
    return <div>
      <NotificationBoard
        id="first"
        autoHideDelay={4000}
      />
      <Accordion onExpand={index => console.log(index)} style={{height: 350}}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{
          title: 'Docs',
          onExpand: showNotification
        }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>

        <div tabTitle={() => 'Themes' }>
          Themes
        </div>
      </Accordion>
    </div>
  }
}

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

import './index.global.css'

const accordion = <Accordion
  style={{ maxWidth: 800, height: 400 }}
  className="accordion-class"
  collapsible
>
  <div tabTitle="Home">
    Home
  </div>

  <div tabTitle="Features">
    Features
  </div>

  <div tabTitle="My account">
    My account
  </div>

  <div tabTitle="About us">
    About us
  </div>

  <div tabTitle="Sign up">
    Sign up
  </div>
</Accordion>

export default () => accordion
Bool
default: false
By default, the tab content is wrapped into a container which will flex to fill the size given by the <Accordion /> or the parent node of the <Accordion />. 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 Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/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 = { stretch: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.stretch}
        onChange={(stretch) => this.setState({ stretch })}
      >
        Stretch tab content
      </CheckBox>
      <p>
        This props are set directly on the accordion tag and will apply to all tab titles in the component.
      </p>
      <Accordion style={{ height: 450 }} stretchTabContent={this.state.stretch}>
        <div
            tabTitle="Overview"
            style={{background: '#b982f1'}}
        >
          <div>
            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.
          </div>
        </div>

        <div
          tabProps={{ title: 'Docs' }}
          style={{background: '#9bf182'}}
        >
          <h2>Docs navigation</h2>
          <p>You can navigate this documentation either by using the side menu on the left, or the next/prev links below, or you can press the n key (from next) or the p key (from prev) to navigate to the next/prev page in the docs.</p>
        </div>

        <div
          tabProps={{ title: 'Features' }}
          style={{background: '#82bcf1'}}
        >
          Features
        </div>
      </Accordion>
    </div>
  }
}

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

const accordion = <Accordion
  style={{
    maxWidth: 800,
    height: 400,
    background: '#f5fdf6',
    border: '1px solid gray',
    borderRadius: '3px'
  }}
>
  <div tabTitle="Home">
    Home
  </div>

  <div tabTitle="Features">
    Feature
  </div>

  <div tabTitle="My account">
    My account
  </div>

  <div tabTitle="About us">
    About us
  </div>

  <div tabTitle="Sign up">
   Sign up
  </div>
</Accordion>

export default () => accordion
String
default: undefined
A className string to be applied to the tab content wrapper which also gets the tabStyle property. This prop is useful if you prefer to keep styling in CSS instead on each tab.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

import './index.global.css'

class App extends React.Component {
  render() {
    return <div>
      <Accordion
        tabClassName='accordion-custom-tab-class'
        style={{ height: 500 }}
      >
        <div tabTitle="Home">
          Home
        </div>

        <div tabTitle="Features">
          Feature
        </div>

        <div tabTitle="My account">
          My account
        </div>

        <div tabTitle="About us">
          About us
        </div>

        <div tabTitle="Sign up">
        Sign up
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
String
default: undefined
Styles the corresponding tab. Will concatenate with tabClassName.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

import './index.global.css'

class App extends React.Component {
  render() {
    return <div>
      <Accordion defaultActiveIndex={1} style={{ height: 350 }}>
        <div
            tabTitle="Overview"
            tabProps={{
              className: 'accordion-custom-tab-class'
            }}
        >
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Object
default: undefined
Styles the corresponding tab. Will merge with tabStyle.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  render() {
    return <div>
      <Accordion defaultActiveIndex={1} style={{ height: 350 }}>
        <div
          tabTitle="Overview"
          tabProps={{
            style: {padding: 40, background: '#f5fdf6'}
          }}
        >
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Object
default: undefined
A style object to be applied to all tab content wrappers. The tab content wrapper is the wrapper of the content of the tabs, which contains the hidden content of collapsed tabs, or the full stretched dimmensions of the expanded tabs. This is a perfect spot for adding padding and backgrounds for spacing content and adding a full width/height background.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  render() {
    return <div>
      <Accordion tabStyle={{ padding: 40, background: '#f5fdf6' }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
String
default: "start"
Specifies the alignment the text of the title on the main axis. Defaults to start. Will map top, left to start, and right, bottom to end. Valid values are:
  • end
  • center
  • top
  • left
  • bottom
  • right
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

const dataSource = ['start', 'end', 'center', 'top', 'left', 'bottom', 'right'].map((item) => {
  return {
    id: item,
    label: item
  }
})

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { alignment: 'start' }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Select tab title align: <ComboBox
          inlineFlex
          collapseOnSelect
          changeValueOnNavigation
          dataSource={dataSource}
          value={this.state.alignment}
          onChange={(value) => this.setState({ alignment: value })}
        />
      </div>
      <Accordion tabTitleAlign={this.state.alignment} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Bool
default: true
By default, titles are forced on one line of text and ellispis is added if it has overflow. Setting tabTitleEllipsis=false will disable this behaviour, making the text of the title break on multiple lines.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/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 = { ellipsis: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.ellipsis}
        onChange={(ellipsis) => this.setState({ ellipsis })}
      >
        tabTitleEllipsis
      </CheckBox>
      <p>
        This props are set directly on the accordion tag and will apply to all tab titles in the component.
      </p>
      <Accordion tabTitleEllipsis={this.state.ellipsis} style={{width: 300, height: 400}}>
        <div
          tabTitle="Overview. Longer title than usual. ippy 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."
        >
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Object
default: undefined
A style object to be applied to all tab title wrappers. The wrapper contains both the title and the expand/collapse arrow and should not have any margin. This is the place to add fixed heights/widths to tabs, background that will contain the entire tab title layout, border and so on.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  render() {
    return <div>
      <Accordion style={{ height: 400 }} tabTitleStyle={{ background: 'aqua' }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
String
default: "middle"
Specifies the text alignment of the title on the secondary axis. Defaults to middle. Useful for tab titles that have fixed height (given by custom css styling or tabTitleStyle prop). Valid values are:
  • top
  • bottom
  • middle
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

const dataSource = ['top', 'middle', 'bottom'].map((item) => {
  return {
    id: item,
    label: item
  }
})

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { alignment: 'middle' }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
      Select a value for <code>tabTitleVerticalAlign</code>: <ComboBox
        inlineFlex
        changeValueOnNavigation
        collapseOnSelect
        dataSource={dataSource}
        value={this.state.alignment}
        onChange={(value) => this.setState({ alignment: value })}
      />
      </div>
      <Accordion
        tabTitleVerticalAlign={this.state.alignment}
        tabTitleStyle={{ height: 50 }}
        style={{ height: 400 }}
      >
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Fn()
undefined
Collapses all tabs, in collapsible mode.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  onCollapseAll() {
    this.acc.collapseAll()
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button
          onClick={()=> this.onCollapseAll() }>
            Collapse All
        </Button>
      </div>
      <p>Collapses all tabs in <code>collapsible</code> mode.
      </p>
      <Accordion ref={acc => this.acc = acc} collapsible multiExpand style={{ minHeight: 450 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
If the <Accordion /> is not collapsible, then one tab will always stay open.
Fn(index: Number)
undefined
Calling this function will collapse the tab at index (0 based).
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import Button from '@zippytech/react-toolkit/Button'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { collapseAt: 0 }
  }
  onCollapseAt() {
    this.acc.collapseAt(this.state.collapseAt)
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button
          onClick={()=>(this.onCollapseAt())}>
            Collapse At
        </Button>{' '}
        <NumericInput
          style={{ width:70 }}
          minValue={0}
          maxValue={2}
          value={this.state.collapseAt}
          onChange={collapseAt => this.setState({ collapseAt })}
        />
      </div>
      <p>Collapses the accordion at a given index.
      </p>
      <Accordion ref={acc => this.acc = acc} collapsible style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Fn()
undefined
Expands all tabs, in multiExpand mode.
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  onExpandAll() {
    this.acc.expandAll()
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button
          onClick={() => this.onExpandAll() }>
            Expand All
        </Button>
      </div>
      <p>Expands all tabs in <code>multiExpand</code> mode.
      </p>
      <Accordion ref={acc => this.acc = acc} collapsible multiExpand style={{ minHeight: 450 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
Fn(index: Number)
undefined
Calling this function will expand the tab at index (0 based).
import React from 'react'
import Accordion from '@zippytech/react-toolkit/Accordion'
import Button from '@zippytech/react-toolkit/Button'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Accordion/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { expandAt: 0 }
  }

  onExpandAt() {
    this.acc.expandAt(this.state.expandAt)
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button
        onClick={()=>(this.onExpandAt())}>
          Expand At
        </Button>{' '}
        <NumericInput
          ref='expandAtInput'
          style={{ width: 70 }}
          minValue={0}
          maxValue={2}
          value={this.state.expandAt}
          onChange={expandAt => this.setState({ expandAt })}
        />
      </div>
      <p>Expands the accordion at a given index.
      </p>
      <Accordion ref={acc => this.acc = acc} style={{ height: 350 }}>
        <div tabTitle="Overview">
          Overview
        </div>

        <div tabProps={{ title: 'Docs' }}>
          Docs
        </div>

        <div tabProps={{ title: 'Features' }}>
          Features
        </div>
      </Accordion>
    </div>
  }
}

export default () => <App />
The tab will not expand if the index tab doesn't exist or if the tab is disabled or locked