Skip to content

Commit

Permalink
docs(tabs): fix page overflow (#1146)
Browse files Browse the repository at this point in the history 
Co-authored-by: Sebastian Sutu <[email protected]>
  • Loading branch information
@SutuSebastian
SutuSebastian and Sebastian Sutu authored Nov 23, 2023
1 parent 5852caf commit 338f741
Showing 1 changed file with 54 additions and 50 deletions.
104 changes: 54 additions & 50 deletions examples/tabs/tabs.fullWidth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,62 +12,66 @@ import { MdDashboard } from 'react-icons/md';
function Component() {
return (
<Tabs aria-label="Full width tabs" style="fullWidth">
<Tabs.Item active title="Profile" icon={HiUserCircle}>
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Dashboard" icon={MdDashboard}>
This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Settings" icon={HiAdjustments}>
This is <span className="font-medium text-gray-800 dark:text-white">Settings tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Contacts" icon={HiClipboardList}>
This is <span className="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item disabled title="Disabled">
Disabled content
</Tabs.Item>
</Tabs>
<div className="overflow-x-auto">
<Tabs aria-label="Full width tabs" style="fullWidth">
<Tabs.Item active title="Profile" icon={HiUserCircle}>
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Dashboard" icon={MdDashboard}>
This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Settings" icon={HiAdjustments}>
This is <span className="font-medium text-gray-800 dark:text-white">Settings tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Contacts" icon={HiClipboardList}>
This is <span className="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item disabled title="Disabled">
Disabled content
</Tabs.Item>
</Tabs>
</div>
);
}
`;

function Component() {
return (
<Tabs aria-label="Full width tabs" style="fullWidth">
<Tabs.Item active title="Profile" icon={HiUserCircle}>
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Dashboard" icon={MdDashboard}>
This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Settings" icon={HiAdjustments}>
This is <span className="font-medium text-gray-800 dark:text-white">Settings tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Contacts" icon={HiClipboardList}>
This is <span className="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item disabled title="Disabled">
Disabled content
</Tabs.Item>
</Tabs>
<div className="overflow-x-auto">
<Tabs aria-label="Full width tabs" style="fullWidth">
<Tabs.Item active title="Profile" icon={HiUserCircle}>
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Dashboard" icon={MdDashboard}>
This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Settings" icon={HiAdjustments}>
This is <span className="font-medium text-gray-800 dark:text-white">Settings tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Contacts" icon={HiClipboardList}>
This is <span className="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item disabled title="Disabled">
Disabled content
</Tabs.Item>
</Tabs>
</div>
);
}

Expand Down

1 comment on commit 338f741

@vercel
Copy link

@vercel vercel bot commented on 338f741 Nov 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flowbite-react – ./

flowbite-react-git-main-themesberg.vercel.app
flowbite-react-phi.vercel.app
www.flowbite-react.com
flowbite-react.com
flowbite-react-themesberg.vercel.app

Please sign in to comment.