Tabs
Tabs are used to organize content by grouping similar information on the same page.
Default
The default form of tabs.
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
import React from 'react';
import tabs{ TabList ,Tab } from '@neoKit/tabs';
const TabExample = () => {
return (
<Tabs>
<TabItem head='tab 1'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 1
</h2>
</div>
</TabItem>
<TabItem head='tab 2'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 2
</h2>
</div>
</TabItem>
<TabItem head='tab 3'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 3
</h2>
</div>
</TabItem>
</Tabs>
);
};
export default TabExample;Appearance
fade-in-down
fade-in-down Animation
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
import React from 'react';
import tabs{ TabList ,Tab } from '@neoKit/tabs';
const FadeInTabExample = () => {
return (
<Tabs appearance='fade-in-down'>
<TabItem head='tab 1'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 1
</h2>
</div>
</TabItem>
<TabItem head='tab 2'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 2
</h2>
</div>
</TabItem>
<TabItem head='tab 3'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 3
</h2>
</div>
</TabItem>
</Tabs>
);
};
export default FadeInTabExample;fade-out-down
fade-out-down Animation
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
import React from 'react';
import tabs{ TabList ,Tab } from '@neoKit/tabs';
const FadeDownTabExample = () => {
return (
<Tabs appearance='fade-out-down'>
<TabItem head='tab 1'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 1
</h2>
</div>
</TabItem>
<TabItem head='tab 2'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 2
</h2>
</div>
</TabItem>
<TabItem head='tab 3'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 3
</h2>
</div>
</TabItem>
</Tabs>
);
};
export default FadeDownTabExample;fade-in-up
fade-in-up Animation
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
import React from 'react';
import tabs{ TabList ,Tab } from '@neoKit/tabs';
const FadeInUpTabExample = () => {
return (
<Tabs appearance='fade-in-up'>
<TabItem head='tab 1'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 1
</h2>
</div>
</TabItem>
<TabItem head='tab 2'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 2
</h2>
</div>
</TabItem>
<TabItem head='tab 3'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 3
</h2>
</div>
</TabItem>
</Tabs>
);
};
export default FadeInUpTabExample;fade-out-up
fade-out-up Animation
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
import React from 'react';
import tabs{ TabList ,Tab } from '@neoKit/tabs';
const FadeOutUpTabExample = () => {
return (
<Tabs appearance='fade-out-up'>
<TabItem head='tab 1'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 1
</h2>
</div>
</TabItem>
<TabItem head='tab 2'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 2
</h2>
</div>
</TabItem>
<TabItem head='tab 3'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 3
</h2>
</div>
</TabItem>
</Tabs>
);
};
export default FadeOutUpTabExample;Tabs with Tooltip
In this example we have added a tooltip to each tab.
Tab 1
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea dolore asperiores fugiat, optio, veritatis pariatur sapiente nesciunt consequatur, libero aspernatur ipsa assumenda ducimus. Illum esse aliquam iste nobis repudiandae facere.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
import React from 'react';
import tabs{ TabList ,Tab } from '@neoKit/tabs';
const TooltipTabExample = () => {
return (
<Tabs>
<TabItem head='tab 1' tooltip='Tooltip for tab 1'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 1
</h2>
</div>
</TabItem>
<TabItem head='tab 2' tooltip='Tooltip for tab 2'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 2
</h2>
</div>
</TabItem>
<TabItem head='tab 3' tooltip='Tooltip for tab 2'>
<div>
<h2 className='font-bold text-lg border-b border-blue-500 p2-3 mb-2'>
Tab 3
</h2>
</div>
</TabItem>
</Tabs>
</Tabs>
);
};
export default TooltipTabExample;