Skip to content

Commit 338f741

Browse files
SutuSebastianSebastian Sutu
SutuSebastian
and
Sebastian Sutu
authored
docs(tabs): fix page overflow (#1146)
Co-authored-by: Sebastian Sutu <[email protected]>
1 parent 5852caf commit 338f741

File tree

1 file changed

+54
-50
lines changed

1 file changed

+54
-50
lines changed

‎examples/tabs/tabs.fullWidth.tsx

Lines changed: 54 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -12,62 +12,66 @@ import { MdDashboard } from 'react-icons/md';
1212
1313
function Component() {
1414
return (
15-
<Tabs aria-label="Full width tabs" style="fullWidth">
16-
<Tabs.Item active title="Profile" icon={HiUserCircle}>
17-
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
18-
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
19-
control the content visibility and styling.
20-
</Tabs.Item>
21-
<Tabs.Item title="Dashboard" icon={MdDashboard}>
22-
This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
23-
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
24-
control the content visibility and styling.
25-
</Tabs.Item>
26-
<Tabs.Item title="Settings" icon={HiAdjustments}>
27-
This is <span className="font-medium text-gray-800 dark:text-white">Settings tab's associated content</span>.
28-
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
29-
control the content visibility and styling.
30-
</Tabs.Item>
31-
<Tabs.Item title="Contacts" icon={HiClipboardList}>
32-
This is <span className="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</span>.
33-
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
34-
control the content visibility and styling.
35-
</Tabs.Item>
36-
<Tabs.Item disabled title="Disabled">
37-
Disabled content
38-
</Tabs.Item>
39-
</Tabs>
15+
<div className="overflow-x-auto">
16+
<Tabs aria-label="Full width tabs" style="fullWidth">
17+
<Tabs.Item active title="Profile" icon={HiUserCircle}>
18+
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
19+
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
20+
control the content visibility and styling.
21+
</Tabs.Item>
22+
<Tabs.Item title="Dashboard" icon={MdDashboard}>
23+
This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
24+
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
25+
control the content visibility and styling.
26+
</Tabs.Item>
27+
<Tabs.Item title="Settings" icon={HiAdjustments}>
28+
This is <span className="font-medium text-gray-800 dark:text-white">Settings tab's associated content</span>.
29+
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
30+
control the content visibility and styling.
31+
</Tabs.Item>
32+
<Tabs.Item title="Contacts" icon={HiClipboardList}>
33+
This is <span className="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</span>.
34+
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
35+
control the content visibility and styling.
36+
</Tabs.Item>
37+
<Tabs.Item disabled title="Disabled">
38+
Disabled content
39+
</Tabs.Item>
40+
</Tabs>
41+
</div>
4042
);
4143
}
4244
`;
4345

4446
function Component() {
4547
return (
46-
<Tabs aria-label="Full width tabs" style="fullWidth">
47-
<Tabs.Item active title="Profile" icon={HiUserCircle}>
48-
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
49-
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
50-
control the content visibility and styling.
51-
</Tabs.Item>
52-
<Tabs.Item title="Dashboard" icon={MdDashboard}>
53-
This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
54-
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
55-
control the content visibility and styling.
56-
</Tabs.Item>
57-
<Tabs.Item title="Settings" icon={HiAdjustments}>
58-
This is <span className="font-medium text-gray-800 dark:text-white">Settings tab's associated content</span>.
59-
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
60-
control the content visibility and styling.
61-
</Tabs.Item>
62-
<Tabs.Item title="Contacts" icon={HiClipboardList}>
63-
This is <span className="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</span>.
64-
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
65-
control the content visibility and styling.
66-
</Tabs.Item>
67-
<Tabs.Item disabled title="Disabled">
68-
Disabled content
69-
</Tabs.Item>
70-
</Tabs>
48+
<div className="overflow-x-auto">
49+
<Tabs aria-label="Full width tabs" style="fullWidth">
50+
<Tabs.Item active title="Profile" icon={HiUserCircle}>
51+
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
52+
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
53+
control the content visibility and styling.
54+
</Tabs.Item>
55+
<Tabs.Item title="Dashboard" icon={MdDashboard}>
56+
This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
57+
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
58+
control the content visibility and styling.
59+
</Tabs.Item>
60+
<Tabs.Item title="Settings" icon={HiAdjustments}>
61+
This is <span className="font-medium text-gray-800 dark:text-white">Settings tab's associated content</span>.
62+
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
63+
control the content visibility and styling.
64+
</Tabs.Item>
65+
<Tabs.Item title="Contacts" icon={HiClipboardList}>
66+
This is <span className="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</span>.
67+
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
68+
control the content visibility and styling.
69+
</Tabs.Item>
70+
<Tabs.Item disabled title="Disabled">
71+
Disabled content
72+
</Tabs.Item>
73+
</Tabs>
74+
</div>
7175
);
7276
}
7377

0 commit comments

Comments
 (0)