Top
Accordion - Getting started
Accordion
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <Accordion />, all you need to import is React, the code and the styles of the component: @zippytech/react-toolkit/Accordion and @zippytech/react-toolkit/Accordion/index.css.
In the above example you can use keyboard arrows to navigate between accordion tabs, and hit Enter to expand the desired tab (first click an inactive tab so the <Accordion /> gets focus).
For the most part, you'll want to be able to easily define accordion tabs and easily intercept user interaction with different accordion tabs.
For defining accordion tabs, you can use a <div /> element or any other React.Node as children inside the <Accordion />, as shown in the first example. To intercept user clicks on accordion tab titles, you can use onActivate(activeIndex).
Without any additional configuration, every tab of the accordion must be a React.Node (e.g. <div />, so it can't be plain text or a number) with a tabTitle prop.
<Accordion>
  <div tabTitle="Tab 1">First tab contents</div>
  <div tabTitle="Tab 2">Second tab contents</div>
</Accordion>
You can also configure the tabProps property on every tab (child) of the <Accordion />, which allows more control over the configuration of each individual tab of the <Accordion /> component.
<Accordion>
  <div tabProps={{ title: "Tab 1", style: { padding: 50 } }}>First tab contents</div>
  <div tabProps={{ title: "Tab 2", disabled: true }}>Second tab contents</div>
</Accordion>
Additionally, you can specify an expandTool property, which can be any valid React.Node (so, basically valid JSX code).
Title can be a String or any other valid React.Node and it can be customized with icons.
By default, expanding or collapsing a tab will use a transition when going from one state to another. The transition duration and the transition function can be controlled using the transitionDuration and transitionFunction props.
You can use the <Accordion /> without any transitions, by setting transition=false.
When using the <Accordion /> with the default theme, tab contents have 20px of padding. You can override that via the tabStyle prop defined on the <Accordion /> or for specific tabs by specifying tabProps.style.
By default, the <Accordion /> 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. See the demo below in order to see tab content streching in action.
You can use any React components as children for the accordion and they will get rendered as accordion tabs.
In the above example, we are using scrollTabContent=true to force the contents of the accordion show scrollbars, and not the accordion content wrapper. More specifically, this means that in the first tab, where we have a TabPanel rendered, the <TabPanel /> will show scrollbars when necessary, not the <Accordion />.
In this case, the component rendered as the tab contents is responsible for using overflow: auto so that it properly renders a scrollbar when needed.
For disabled tabs, simply specify disabled: true in tabProps on the accordion tab that you want to show as disabled. The same goes with locked.