Advanced

Options Cycle

Allows to cycle through an ordered list of options using right-left arrow buttons.
View source
Option 1
1
import {OptionsCycleConnected} from '@coveord/plasma-react';
2


3
export default () => <OptionsCycleConnected id="Cycle-1" options={['Option 1', 'Option 2', 'Option 3', 'Option 4']} />;

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
export default () => (
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
);

No guidelines exist for OptionsCycle yet.

Create guidelines