vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Merge pull request #386 from sosaucily/add_activeClassName_to_tab 

add activeClassName to tab component
old
Javi Velasco 2016-03-17 08:31:05 +01:00
parent 2355b71dd8 1cda333723
commit 688f3944d4
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/tabs/Tab.jsx
View File

@ -5,6 +5,7 @@ import style from './style';
class TabHeader extends React.Component { class TabHeader extends React.Component {
static propTypes = { static propTypes = {
active: React.PropTypes.bool, active: React.PropTypes.bool,
activeClassName: React.PropTypes.string,
className: React.PropTypes.string, className: React.PropTypes.string,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
hidden: React.PropTypes.bool, hidden: React.PropTypes.bool,
@ -36,7 +37,8 @@ class TabHeader extends React.Component {
const className = ClassNames(style.label, { const className = ClassNames(style.label, {
[style.active]: this.props.active, [style.active]: this.props.active,
[style.hidden]: this.props.hidden, [style.hidden]: this.props.hidden,
[style.disabled]: this.props.disabled [style.disabled]: this.props.disabled,
[this.props.activeClassName]: this.props.active
}, this.props.className); }, this.props.className);
return ( return (

13
components/tabs/readme.md
View File

@ -49,9 +49,10 @@ Represent a single tab element and it should include some properties to describe
| Name | Type | Default | Description| | Name | Type | Default | Description|
|:-----|:-----|:-----|:-----| |:-----|:-----|:-----|:-----|
| `active` | `Boolean` | `false` | If true, the current component is visible.| | `active` | `Boolean` | `false` | If true, the current component is visible.|
| `className` | `String` | `''` | Additional class name to provide custom styling.| | `activeClassName` | `String` | `''` | Additional class name to provide custom styling for the active tab.|
| `disabled` | `Boolean` | `false` | If true, the current component is not clickable.| | `className` | `String` | `''` | Additional class name to provide custom styling for each tab.|
| `hidden` | `Boolean` | `false` | If true, the current component is not visible.| | `disabled` | `Boolean` | `false` | If true, the current component is not clickable.|
| `label` | `String` | | Label text for navigation header | | `hidden` | `Boolean` | `false` | If true, the current component is not visible.|
| `onActive` | `Function` | | Callback function that is fired when the tab is activated. | | `label` | `String` | | Label text for navigation header |
| `onActive` | `Function` | | Callback function that is fired when the tab is activated. |