diff --git a/components/tabs/tabs.cjsx b/components/tabs/tabs.cjsx index fc7a42f1..5dffe0a2 100644 --- a/components/tabs/tabs.cjsx +++ b/components/tabs/tabs.cjsx @@ -19,19 +19,19 @@ module.exports = React.createClass # -- Lifecycle componentDidMount: -> - @setState pointer: @pointerPosition @state.index + @setState pointer: _pointerPosition @state.index, @refs.navigation.getDOMNode() componentWillReceiveProps: (next_props) -> index = next_props.index or @state.index @setState index : index - pointer : @pointerPosition index + pointer : _pointerPosition index, @refs.navigation.getDOMNode() # -- Events onClick: (index, event, ref) -> @setState index : index - pointer : @pointerPosition index + pointer : _pointerPosition index, @refs.navigation.getDOMNode() @props.onChange? @ # -- Render @@ -65,11 +65,10 @@ module.exports = React.createClass { tabs } - # -- Private methods - pointerPosition: (index = 0) -> - navigation = @refs.navigation.getDOMNode() - label = navigation.children[index].getBoundingClientRect() - style = - top : "#{navigation.getBoundingClientRect().height}px" - left : "#{label.left}px" - width : "#{label.width}px" +# -- Private methods +_pointerPosition = (index = 0, navigation) -> + label = navigation.children[index].getBoundingClientRect() + style = + top : "#{navigation.getBoundingClientRect().height}px" + left : "#{label.left}px" + width : "#{label.width}px" diff --git a/components/tabs/tabs.md b/components/tabs/tabs.md new file mode 100644 index 00000000..84b1ad16 --- /dev/null +++ b/components/tabs/tabs.md @@ -0,0 +1,50 @@ +# Tabs + +```javascript +Tabs = require('../../components/tabs').Tabs +Tab = require('../../components/tabs').Tab + + + + primary + + + secondary + + + third + + + +``` + + +## Properties +| Name | Type | Default | Description| +|:- |:-: | :- |:-| +| **className** | String | `''` | Additional class name to provide custom styling.| +| **index** | Number | `0` | Current | +| **onChange** | Function | | Callback function that is fired when the tab changes. + +## Properties + +| Name | Type | Default | Description| +|:- |:-: | :- |:-| +| **active** | Boolean | `false` | If true, the current component is visible.| +| **className** | String | `''` | Additional class name to provide custom styling.| +| **disabled** | Boolean | `false` | If true, the current component is not clickable.| +| **hidden** | Boolean | `false` | If true, the current component is not visible.| +| **label** | String | | Label for navigation| +| **onActive** | Function | | Callback function that is fired when the tab is activated. | +| **tabIndex** | Number | | Sets the tabindex html attribute.| + +## Methods + +#### active +Active/Deactive a determinate instance of the component. + +``` +tab_instance.active(true); +``` diff --git a/spec/components/tabs.cjsx b/spec/components/tabs.cjsx index aef12ead..3e31a936 100644 --- a/spec/components/tabs.cjsx +++ b/spec/components/tabs.cjsx @@ -19,5 +19,8 @@ module.exports = React.createClass + + Fifth + diff --git a/spec/index.cjsx b/spec/index.cjsx index 876c4001..4df76792 100644 --- a/spec/index.cjsx +++ b/spec/index.cjsx @@ -12,6 +12,7 @@ Form = require './components/form' Progress = require './components/progress' Slider = require './components/slider' Switch = require './components/switch' +Tabs = require './components/tabs' Test = React.createClass @@ -31,6 +32,7 @@ Test = React.createClass + React.render , document.body