Skip to content

Commit 5de3ea5

Browse files
danezdanez
committed
Add example for nested tabs
1 parent 3d30e1d commit 5de3ea5

File tree

2 files changed

+97
-0
lines changed

2 files changed

+97
-0
lines changed

‎examples/nested/app.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
4+
5+
const App = React.createClass({
6+
7+
render() {
8+
return (
9+
<div style={{ padding: 50 }}>
10+
<Tabs>
11+
<TabList>
12+
<Tab>The Simpsons</Tab>
13+
<Tab>Futurama</Tab>
14+
</TabList>
15+
<TabPanel>
16+
<Tabs>
17+
<TabList>
18+
<Tab>Homer Simpson</Tab>
19+
<Tab>Marge Simpson</Tab>
20+
<Tab>Bart Simpson</Tab>
21+
<Tab>Lisa Simpson</Tab>
22+
<Tab>Maggie Simpson</Tab>
23+
</TabList>
24+
<TabPanel>
25+
<p>Husband of Marge; father of Bart, Lisa, and Maggie.</p>
26+
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/02/Homer_Simpson_2006.png/212px-Homer_Simpson_2006.png" alt="Homer Simpson" />
27+
</TabPanel>
28+
<TabPanel>
29+
<p>Wife of Homer; mother of Bart, Lisa, and Maggie.</p>
30+
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/0b/Marge_Simpson.png/220px-Marge_Simpson.png" alt="Marge Simpson" />
31+
</TabPanel>
32+
<TabPanel>
33+
<p>Oldest child and only son of Homer and Marge; brother of Lisa and Maggie.</p>
34+
<img src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png" alt="Bart Simpson" />
35+
</TabPanel>
36+
<TabPanel>
37+
<p>Middle child and eldest daughter of Homer and Marge; sister of Bart and Maggie.</p>
38+
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/ec/Lisa_Simpson.png/200px-Lisa_Simpson.png" alt="Lisa Simpson" />
39+
</TabPanel>
40+
<TabPanel>
41+
<p>Youngest child and daughter of Homer and Marge; sister of Bart and Lisa.</p>
42+
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9d/Maggie_Simpson.png/223px-Maggie_Simpson.png" alt="Maggie Simpson" />
43+
</TabPanel>
44+
</Tabs>
45+
</TabPanel>
46+
<TabPanel>
47+
<Tabs>
48+
<TabList>
49+
<Tab>Philip J. Fry</Tab>
50+
<Tab>Turanga Leela</Tab>
51+
<Tab>Bender Bending Rodriguez</Tab>
52+
<Tab>Amy Wong</Tab>
53+
<Tab>Professor Hubert J. Farnsworth</Tab>
54+
<Tab>Doctor John Zoidberg</Tab>
55+
</TabList>
56+
<TabPanel>
57+
<p>Protagonist, from the 20th Century. Delivery boy. Many times great-uncle to Professor Hubert Farnsworth. Suitor of Leela.</p>
58+
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/2/28/Philip_Fry.png/175px-Philip_Fry.png" alt="Philip J. Fry" />
59+
</TabPanel>
60+
<TabPanel>
61+
<p>Mutant cyclops. Captain of the Planet Express Ship. Love interest of Fry.</p>
62+
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d4/Turanga_Leela.png/150px-Turanga_Leela.png" alt="Turanga Leela" />
63+
</TabPanel>
64+
<TabPanel>
65+
<p>A kleptomaniacal, lazy, cigar-smoking, heavy-drinking robot who is Fry's best friend. Built in Tijuana, Mexico, he is the Planet Express Ship's cook.</p>
66+
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a6/Bender_Rodriguez.png/220px-Bender_Rodriguez.png" alt="Bender Bending Rodriguez" />
67+
</TabPanel>
68+
<TabPanel>
69+
<p>Chinese-Martian intern at Planet Express. Fonfon Ru of Kif Kroker.</p>
70+
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/fd/FuturamaAmyWong.png/140px-FuturamaAmyWong.png" alt="Amy Wong" />
71+
</TabPanel>
72+
<TabPanel>
73+
<p>Many times great-nephew of Fry. CEO and owner of Planet Express delivery company. Tenured professor of Mars University.</p>
74+
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/0f/FuturamaProfessorFarnsworth.png/175px-FuturamaProfessorFarnsworth.png" alt="Professor Hubert J. Farnsworth" />
75+
</TabPanel>
76+
<TabPanel>
77+
<p>Alien from Decapod 10. Planet Express' staff doctor and steward. Has a medical degree and Ph.D in art history.</p>
78+
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Dr_John_Zoidberg.png/200px-Dr_John_Zoidberg.png" alt="Doctor John Zoidberg" />
79+
</TabPanel>
80+
</Tabs>
81+
</TabPanel>
82+
</Tabs>
83+
</div>
84+
);
85+
},
86+
});
87+
88+
ReactDOM.render(<App />, document.getElementById('example'));
89+

‎examples/nested/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!doctype html>
2+
<meta charset="utf-8"/>
3+
<title>React Tabs</title>
4+
<body>
5+
<div id="example"></div>
6+
<script src="../__build__/shared.js"></script>
7+
<script src="../__build__/nested.js"></script>
8+

0 commit comments

Comments
 (0)