1.0.1 • Published 5 years ago
@opuscapita/oc-cm-split-button v1.0.1
oc-cm-split-button
Description
Describe the component here
Installation
npm install @opuscapita/oc-cm-split-buttonDemo
View the DEMO
Builds
UMD
The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.
CommonJS/ES Module
You need to configure your module loader to use cjs or es fields of the package.json to use these module types.
Also you need to configure sass loader, since all the styles are in sass format.
- With webpack use resolve.mainFields to configure the module type.
- Add SASS loader to support importing of SASS styles.
API
SplitButton
| Prop name | Type | Default | Description |
|---|---|---|---|
| id | string | required | The ID |
| title | string or node | required | Split button label |
| menuItems | array | required | @opuscapita/react-dropdown: List of the dropdown menu items (check menuItems props from @opuscapita/react-dropdown) |
| disabled | boolean | false | Whether or not button is disabled. |
| menuDisabled | boolean | false | Whether or not dropdown menu is disabled. |
| icon | node | null | Button icon |
| onButtonClick | function | ()=>{} | A callback fired when a button is selected. |
Icon
| Prop name | Type | Default | Description |
|---|---|---|---|
| faIcon | string | required | fontawesome icon name e.g. 'fa fa-check' |
| color | string | black | Icon color |
| size | string | 14px | Icon font size |
| padding | string | 0 | Icon paddings |
| margin | string | 0 | Icon margins |
Code example
import React from "react";
import SplitButton, { Icon } from "@opuscapita/oc-cm-split-button";
export default class ReactView extends React.Component {
getMenuItems = () => [
{
id: "item_id_21",
title: "Item 1",
onClick: () => {} // es
},
{
id: "item_id_22",
title: "Item 2",
onClick: () => {}
},
{
id: "item_id_d1",
type: "divider"
},
{
id: "item_id_23",
title: "Item 3",
onClick: () => {},
disableClosing: true
}
];
renderIcon = () => (
<Icon
faIcon="fa fa-check"
color="lightgreen"
size="1.5rem"
margin="0 0.5rem 0 0"
/>
);
render() {
return (
<SplitButton
id="split-button-example-id"
title="Save"
menuItems={this.getMenuItems()}
icon={this.renderIcon()}
/>
);
}
}