You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

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
const Demo = () => <OptionsCycleConnected id="Cycle-1" options={['Option 1', 'Option 2', 'Option 3', 'Option 4']} />;
4
export default Demo;

Props

Name	Type	Default	Description
`id`required	`string`
`options`required	`ReactNode[]`
`buttonClassName`	`string`
`className`	`string`
`isInline`	`boolean`
`nextClassName`	`string`
`onChangeOption`	`(index: number) => void`
`previousClassName`	`string`
`startAt`	`number`
`wrapAround`	`boolean`

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