<Tabs> and <Tab> finished
parent
7241505a53
commit
6b5259d081
|
@ -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 }
|
||||
</div>
|
||||
|
||||
# -- 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"
|
||||
|
|
|
@ -0,0 +1,50 @@
|
|||
# Tabs
|
||||
|
||||
```javascript
|
||||
Tabs = require('../../components/tabs').Tabs
|
||||
Tab = require('../../components/tabs').Tab
|
||||
|
||||
<Tabs>
|
||||
<Tab label='Primary'>
|
||||
<small>primary</small>
|
||||
</Tab>
|
||||
<Tab label='Secondary'>
|
||||
<small>secondary</small>
|
||||
</Tab>
|
||||
<Tab label='Third' disabled>
|
||||
<small>third</small>
|
||||
</Tab>
|
||||
<Tab label='Fourth' hidden>
|
||||
<small>fourth</small>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
|
||||
## Properties <Tabs>
|
||||
| Name | Type | Default | Description|
|
||||
|:- |:-: | :- |:-|
|
||||
| **className** | String | `''` | Additional class name to provide custom styling.|
|
||||
| **index** | Number | `0` | Current <Tab> |
|
||||
| **onChange** | Function | | Callback function that is fired when the tab changes.
|
||||
|
||||
## Properties <Tab>
|
||||
|
||||
| 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 <Tab>
|
||||
|
||||
#### active
|
||||
Active/Deactive a determinate instance of the <Tab> component.
|
||||
|
||||
```
|
||||
tab_instance.active(true);
|
||||
```
|
|
@ -19,5 +19,8 @@ module.exports = React.createClass
|
|||
<Tab label='Fourth' hidden>
|
||||
<small>Fourth</small>
|
||||
</Tab>
|
||||
<Tab label='Fifth'>
|
||||
<small>Fifth</small>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</section>
|
||||
|
|
|
@ -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
|
|||
<Progress />
|
||||
<Slider />
|
||||
<Switch />
|
||||
<Tabs />
|
||||
</app>
|
||||
|
||||
React.render <Test/>, document.body
|
||||
|
|
Loading…
Reference in New Issue