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
import {Tab, Tabs} from 'react-toolbox';
const TabsExample = () => (
<Tabs>
<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>
);
class TabsTest extends React.Component {
state = {
index: 1
};
handleTabChange = (index) => {
this.setState({index});
};
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

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

@ -1,11 +1,27 @@
const TabsExample = () => (
<Tabs>
<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>
);
class TabsExample extends React.Component {
state = {
index: 1
};
handleTabChange = (index) => {
this.setState({index});
};
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 />;

26
spec/components/tabs.jsx
View File

@ -2,7 +2,6 @@ import React from 'react';
import { Tabs, Tab } from '../../components/tabs';
class TabsTest extends React.Component {
state = {
index: 1
};
@ -20,27 +19,12 @@ class TabsTest extends React.Component {
<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>
<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>
);