diff --git a/docs/api/Tabs/Tab.md b/docs/api/Tabs/Tab.md index 148f6d06df434b..9874c18937a5fb 100644 --- a/docs/api/Tabs/Tab.md +++ b/docs/api/Tabs/Tab.md @@ -11,5 +11,6 @@ Props | className | string | | The CSS class name of the root element. | | icon | node | | The icon element. If a string is passed, it will be used as a material icon font ligature. | | label | node | | The label element. | +| disabled | bool | false | If `true`, the tab will be disabled. | Any other properties supplied will be spread to the root element. diff --git a/docs/site/src/demos/tabs/DisabledTabs.js b/docs/site/src/demos/tabs/DisabledTabs.js new file mode 100644 index 00000000000000..3a685dba29548b --- /dev/null +++ b/docs/site/src/demos/tabs/DisabledTabs.js @@ -0,0 +1,35 @@ +// @flow weak +/* eslint-disable react/no-multi-comp */ + +import React, { Component } from 'react'; +import customPropTypes from 'material-ui/utils/customPropTypes'; +import Paper from 'material-ui/Paper'; +import Tabs from 'material-ui/Tabs'; +import Tab from 'material-ui/Tabs/Tab'; + +export default class DisabledTabs extends Component { + static contextTypes = { + styleManager: customPropTypes.muiRequired, + }; + + state = { + index: 1, + }; + + handleChange = (event, index) => { + this.setState({ index }); + }; + + render() { + return ( + + + + + + + + + ); + } +} diff --git a/docs/site/src/demos/tabs/tabs.md b/docs/site/src/demos/tabs/tabs.md index 14a2ef612c866f..40bb8b5c5834a9 100644 --- a/docs/site/src/demos/tabs/tabs.md +++ b/docs/site/src/demos/tabs/tabs.md @@ -31,3 +31,9 @@ Tab labels may be either all icons or all text. {{demo='demos/tabs/IconTabs.js'}} {{demo='demos/tabs/IconLabelTabs.js'}} + +## Disabled Tab + +Tab may be disabled by setting `disabled` property. + +{{demo='demos/tabs/DisabledTabs.js'}} diff --git a/src/Tabs/Tab.js b/src/Tabs/Tab.js index d65207941a11fd..24bf48f4c5f3ef 100644 --- a/src/Tabs/Tab.js +++ b/src/Tabs/Tab.js @@ -29,6 +29,9 @@ export const styleSheet = createStyleSheet('Tab', (theme) => { rootAccentSelected: { color: theme.palette.accent[500], }, + rootAccentDisabled: { + color: theme.palette.text.disabled, + }, rootInherit: { color: 'inherit', opacity: 0.7, @@ -36,6 +39,9 @@ export const styleSheet = createStyleSheet('Tab', (theme) => { rootInheritSelected: { opacity: 1, }, + rootInheritDisabled: { + opacity: 0.4, + }, label: { fontSize: theme.typography.fontSize, fontWeight: theme.typography.fontWeightMedium, @@ -61,6 +67,10 @@ export default class Tab extends Component { * The CSS class name of the root element. */ className: PropTypes.string, + /** + * If `true`, the tab will be disabled. + */ + disabled: PropTypes.bool, /** * @ignore */ @@ -105,6 +115,10 @@ export default class Tab extends Component { ]), }; + static defaultProps = { + disabled: false, + }; + static contextTypes = { styleManager: customPropTypes.muiRequired, }; @@ -130,6 +144,7 @@ export default class Tab extends Component { selected, style: styleProp, textColor, + disabled, ...other } = this.props; @@ -155,8 +170,10 @@ export default class Tab extends Component { const className = classNames(classes.root, { [classes.rootAccent]: textColor === 'accent', + [classes.rootAccentDisabled]: disabled && textColor === 'accent', [classes.rootAccentSelected]: selected && textColor === 'accent', [classes.rootInherit]: textColor === 'inherit', + [classes.rootInheritDisabled]: disabled && textColor === 'inherit', [classes.rootInheritSelected]: selected && textColor === 'inherit', [classes.rootLabelIcon]: icon && label, }, classNameProp); @@ -183,6 +200,7 @@ export default class Tab extends Component { style={style} role="tab" aria-selected={selected} + disabled={disabled} {...other} onClick={this.handleChange} >