blob: 74f163c5cf7aed5d9e74b4760cd5f0a71c765f51 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
import React from 'react';
import Examples from './utils/Examples.js';
import {default as TabsComp} from '../../src/react/Tabs.js';
import Tab from '../../src/react/Tab.js';
import HTMLTabsHeader from '../../components/tabs/tabs-header.html';
import HTMLTabsDisabled from '../../components/tabs/tabs-disabled.html';
import HTMLTabsMenu from '../../components/tabs/tabs-menu.html';
let examples = {
'Menu Tabs': {
jsx: <TabsComp type='menu' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
<Tab title='tab 1' tabId='1'>
<div>This is the active tab content</div>
</Tab>
<Tab title='tab 2' tabId='2' />
<Tab title='tab 3' tabId='3' />
</TabsComp>,
html: HTMLTabsMenu
},
'Header Tabs': {
jsx: <TabsComp type='header' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
<Tab title='tab 1' tabId='1'>
<div>This is the active tab content</div>
</Tab>
<Tab title='tab 2' tabId='2' />
<Tab title='tab 3' tabId='3' />
</TabsComp>,
html: HTMLTabsHeader
},
'Disabled Tabs': {
jsx: (
<TabsComp type='header' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
<Tab title='tab 1' tabId='1'>
<div>This is the active tab content</div>
</Tab>
<Tab title='tab 2' tabId='2' disabled/>
<Tab title='tab 3' tabId='3' disabled/>
</TabsComp>
),
html: HTMLTabsDisabled
}
};
const Tabs = () => (
<Examples examples={examples} />
);
export default Tabs;
|
