2018-07-25 14:25:08 +00:00
|
|
|
```jsx
|
2018-09-24 15:36:35 +00:00
|
|
|
import { SplitButton } from '@woocommerce/components';
|
2018-07-25 14:25:08 +00:00
|
|
|
|
2018-09-24 15:36:35 +00:00
|
|
|
const MySplitButton = () => (
|
2018-07-25 14:25:08 +00:00
|
|
|
<div>
|
|
|
|
<SplitButton
|
|
|
|
isPrimary
|
|
|
|
mainLabel="Primary Button"
|
|
|
|
menuLabel="Select an action"
|
|
|
|
onClick={ () => alert( 'Primary Main Action clicked' ) }
|
|
|
|
controls={ [
|
|
|
|
{
|
|
|
|
label: 'Up',
|
|
|
|
onClick: () => alert( 'Primary Up clicked' ),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Right',
|
|
|
|
onClick: () => alert( 'Primary Right clicked' ),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Down',
|
|
|
|
icon: <Gridicon icon="arrow-down" />,
|
|
|
|
onClick: () => alert( 'Primary Down clicked' ),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Left',
|
|
|
|
icon: <Gridicon icon="arrow-left" />,
|
|
|
|
onClick: () => alert( 'Primary Left clicked' ),
|
|
|
|
},
|
|
|
|
] }
|
2018-09-24 15:36:35 +00:00
|
|
|
/>
|
|
|
|
|
2018-07-25 14:25:08 +00:00
|
|
|
<SplitButton
|
|
|
|
mainIcon={ <Gridicon icon="pencil" /> }
|
|
|
|
menuLabel="Select an action"
|
|
|
|
onClick={ () => alert( 'Icon Only Action clicked' ) }
|
|
|
|
controls={ [
|
|
|
|
{
|
|
|
|
label: 'Up',
|
|
|
|
icon: <Gridicon icon="arrow-up" />,
|
|
|
|
onClick: () => alert( 'Icon Only Up clicked' ),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Right',
|
|
|
|
onClick: () => alert( 'Icon Only Right clicked' ),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Down',
|
|
|
|
icon: <Gridicon icon="arrow-down" />,
|
|
|
|
onClick: () => alert( 'Icon Only Down clicked' ),
|
|
|
|
},
|
|
|
|
{
|
2018-09-24 15:36:35 +00:00
|
|
|
label: 'Left',
|
2018-07-25 14:25:08 +00:00
|
|
|
icon: <Gridicon icon="arrow-left" />,
|
|
|
|
onClick: () => alert( 'Icon Only Left clicked' ),
|
|
|
|
},
|
|
|
|
] }
|
|
|
|
/>
|
|
|
|
</div>
|
2018-09-24 15:36:35 +00:00
|
|
|
);
|
2018-07-25 14:25:08 +00:00
|
|
|
```
|