Advanced

Options Cycle

Allows to cycle through an ordered list of options using right-left arrow buttons.
Option 1
1
import {OptionsCycleConnected} from '@coveord/plasma-react';
2
3
const Demo = () => <OptionsCycleConnected id="Cycle-1" options={['Option 1', 'Option 2', 'Option 3', 'Option 4']} />;
4
export default Demo;

Props

NameTypeDefaultDescription
idrequiredstring
optionsrequiredReactNode[]
buttonClassNamestring
classNamestring
isInlineboolean
nextClassNamestring
onChangeOption(index: number) => void
previousClassNamestring
startAtnumber
wrapAroundboolean

Examples

Styles like the Button
Option 1
1
import {OptionsCycleConnected} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<OptionsCycleConnected
5
id="Cycle-1"
6
options={['Option 1', 'Option 2', 'Option 3', 'Option 4']}
7
previousClassName="btn mod-border w4 center"
8
buttonClassName="btn ml1"
9
nextClassName="btn mod-border ml1 w4 center"
10
/>
11
);
12
export default Demo;

No guidelines exist for OptionsCycle yet.

Create guidelines