Files
react-test/docs/data/joy/components/tabs/TabsScrollable.tsx
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

24 lines
624 B
TypeScript

import Tabs from '@mui/joy/Tabs';
import TabList from '@mui/joy/TabList';
import Tab from '@mui/joy/Tab';
export default function TabsScrollable() {
return (
<Tabs aria-label="Scrollable tabs" defaultValue={0} sx={{ width: 400 }}>
<TabList
sx={{
overflow: 'auto',
scrollSnapType: 'x mandatory',
'&::-webkit-scrollbar': { display: 'none' },
}}
>
{[...Array(20)].map((_, index) => (
<Tab key={index} sx={{ flex: 'none', scrollSnapAlign: 'start' }}>
Tab #{index + 1}
</Tab>
))}
</TabList>
</Tabs>
);
}