diff --git a/docs/examples/ButtonGroupBlock.js b/docs/examples/ButtonGroupBlock.js
new file mode 100644
index 0000000000..5ae4feca1e
--- /dev/null
+++ b/docs/examples/ButtonGroupBlock.js
@@ -0,0 +1,8 @@
+const buttonGroupInstance = (
+
Just add vertical
to the {'
.
Moreover, you can have buttons be block level elements so they take the full width of their container, just add block
to the {'
, in addition to the vertical
you just added.
Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
diff --git a/docs/src/Samples.js b/docs/src/Samples.js index b15e400a85..712023984e 100644 --- a/docs/src/Samples.js +++ b/docs/src/Samples.js @@ -14,6 +14,7 @@ export default { ButtonGroupNested: require('fs').readFileSync(__dirname + '/../examples/ButtonGroupNested.js', 'utf8'), ButtonGroupVertical: require('fs').readFileSync(__dirname + '/../examples/ButtonGroupVertical.js', 'utf8'), ButtonGroupJustified: require('fs').readFileSync(__dirname + '/../examples/ButtonGroupJustified.js', 'utf8'), + ButtonGroupBlock: require('fs').readFileSync(__dirname + '/../examples/ButtonGroupBlock.js', 'utf8'), DropdownButtonBasic: require('fs').readFileSync(__dirname + '/../examples/DropdownButtonBasic.js', 'utf8'), SplitButtonBasic: require('fs').readFileSync(__dirname + '/../examples/SplitButtonBasic.js', 'utf8'), DropdownButtonSizes: require('fs').readFileSync(__dirname + '/../examples/DropdownButtonSizes.js', 'utf8'), diff --git a/src/ButtonGroup.js b/src/ButtonGroup.js index 1492ae7bce..c82a31771c 100644 --- a/src/ButtonGroup.js +++ b/src/ButtonGroup.js @@ -1,13 +1,22 @@ import React from 'react'; import classNames from 'classnames'; import BootstrapMixin from './BootstrapMixin'; +import CustomPropTypes from './utils/CustomPropTypes'; const ButtonGroup = React.createClass({ mixins: [BootstrapMixin], propTypes: { vertical: React.PropTypes.bool, - justified: React.PropTypes.bool + justified: React.PropTypes.bool, + block: CustomPropTypes.all([ + React.PropTypes.bool, + function(props, propName, componentName) { + if (props.block && !props.vertical) { + return new Error('The block property requires the vertical property to be set to have any effect'); + } + } + ]) }, getDefaultProps() { @@ -21,6 +30,7 @@ const ButtonGroup = React.createClass({ classes['btn-group'] = !this.props.vertical; classes['btn-group-vertical'] = this.props.vertical; classes['btn-group-justified'] = this.props.justified; + classes['btn-block'] = this.props.block; return (