Package Exports

react-split-button

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-split-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-split-button

A carefully crafted split-button for React

See split-button demo

Install

$ npm install react-split-button --save

Description

The split-button is similar to the dropdown button, but also enables a default action on the button, without showing the drop-down menu.

The split button smartly positions the drop-down menu to fit into the document. You can customize how the menu is aligned to the button. With one function, you can respond to a click in the menu at any nesting level.

Worth trying out, see the demo page

Changelog

See Changelog

Usage

var SplitButton = require('react-split-button')

var items = [
    {
        label: 'save as',
        onClick: function(){
            console.log('saved as')
        },
        items: [
            {
                label: 'PDF',
                onClick: function(){
                    console.log('save as PDF')
                }
            },
            {
                label: 'Postscript'
            }
        ]
    },
    {
        label: 'export',
        onClick: function(){
            console.log('exported')
        }
    },
]

function save(){
    console.log('SAVED!')
}

<SplitButton items={items} onClick={save}>
    Save
</SplitButton>

function onMenuClick(event, itemProps){
    console.log('You clicked ', itemProps.data.label)
}

<SplitButton items={items} onMenuClick={onMenuClick} onClick={save}>
    Save
</SplitButton>

Properties

The split button is implemented as two buttons, one next to the other (named button and arrow from now on). The arrow button is just a react-dropdown-button

Actions

onClick: Function - function to be called when the button is clicked (not the arrow!)
onToggle: Function(pressed: boolean) - function to be called when the button is toggled
onArrowClick: Function - function to be called when the arrow is clicked
onMenuClick: Function(event, itemProps) - a function to be called when a menu item is clicked

items - an array of menu items to build the menu
menu - you can specify a menu instead of the menu items

Other attributes

href - href for the button
align - applied to the button
label - applied to the button
disabled - applied to the button and the arrow
pressed - applied to the button
defaultPressed - applied to the button
theme - a theme to apply the button and the arrow. See buttom styling
buttonProps - props for the button
arrowProps - props for the arrow
commonProps - props for both the button and the arrow
buttonStyle
arrowStyle
commonStyle - styles to be applied to both the arrow and the button

Contributing

$ npm install
$ npm run dev # to start webpack-dev-server
$ npm run serve # to start http-server on port 9091

JSPM