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

Fix examples for tab

old
Javi Velasco 2015-11-18 09:57:46 +01:00
parent 8aa5fa92b5
commit e0a4168c79
3 changed files with 59 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/tabs/readme.md
View File

@ -6,15 +6,35 @@
```jsx ```jsx
import {Tab, Tabs} from 'react-toolbox'; import {Tab, Tabs} from 'react-toolbox';
const TabsExample = () => ( class TabsTest extends React.Component {
<Tabs> state = {
<Tab label='Primary'><small>Primary content</small></Tab> index: 1
<Tab label='Secondary'><small>Secondary content</small></Tab> };
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab> handleTabChange = (index) => {
<Tab label='Fifth'><small>Fifth content</small></Tab> this.setState({index});
</Tabs> };
);
handleActive = () => {
console.log('Special one activated');
};
render () {
return (
<section>
<h5>Tabs</h5>
<p>This tabs can be disabled or hidden</p>
<Tabs index={this.state.index} onChange={this.handleTabChange}>
<Tab label='Primary'><small>Primary content</small></Tab>
<Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
<Tab label='Fifth'><small>Fifth content</small></Tab>
</Tabs>
</section>
);
}
}
``` ```
## Tabs ## Tabs

34
docs/app/components/layout/main/modules/examples/tabs_example_1.txt
View File

@ -1,11 +1,27 @@
const TabsExample = () => ( class TabsExample extends React.Component {
<Tabs> state = {
<Tab label='Primary'><small>Primary content</small></Tab> index: 1
<Tab label='Secondary'><small>Secondary content</small></Tab> };
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab> handleTabChange = (index) => {
<Tab label='Fifth'><small>Fifth content</small></Tab> this.setState({index});
</Tabs> };
);
render () {
return (
<section>
<h5>Tabs</h5>
<p>This tabs can be disabled or hidden</p>
<Tabs index={this.state.index} onChange={this.handleTabChange}>
<Tab label='Primary'><small>Primary content</small></Tab>
<Tab label='Secondary'><small>Secondary content</small></Tab>
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
<Tab label='Fifth'><small>Fifth content</small></Tab>
</Tabs>
</section>
);
}
}
return <TabsExample />; return <TabsExample />;

26
spec/components/tabs.jsx
View File

@ -2,7 +2,6 @@ import React from 'react';
import { Tabs, Tab } from '../../components/tabs'; import { Tabs, Tab } from '../../components/tabs';
class TabsTest extends React.Component { class TabsTest extends React.Component {
state = { state = {
index: 1 index: 1
}; };
@ -20,27 +19,12 @@ class TabsTest extends React.Component {
<section> <section>
<h5>Tabs</h5> <h5>Tabs</h5>
<p>This tabs can be disabled or hidden</p> <p>This tabs can be disabled or hidden</p>
<Tabs index={this.state.index} onChange={this.handleTabChange}> <Tabs index={this.state.index} onChange={this.handleTabChange}>
<Tab label='Primary'> <Tab label='Primary'><small>Primary content</small></Tab>
<small>Primary content</small> <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
</Tab> <Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
<Tab label='Secondary' onActive={this.handleActive}> <Tab label='Fifth'><small>Fifth content</small></Tab>
<small>Secondary content</small>
</Tab>
<Tab label='Third' disabled>
<small>Disabled content</small>
</Tab>
<Tab label='Fourth' hidden>
<small>Fourth content hidden</small>
</Tab>
<Tab label='Fifth'>
<small>Fifth content</small>
</Tab>
</Tabs> </Tabs>
</section> </section>
); );