42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import Tabs from '@mui/joy/Tabs';
|
||
|
|
import TabList from '@mui/joy/TabList';
|
||
|
|
import Tab from '@mui/joy/Tab';
|
||
|
|
|
||
|
|
export default function TabsSticky() {
|
||
|
|
const [sticky, setSticky] = React.useState('top');
|
||
|
|
const items = [
|
||
|
|
<TabList
|
||
|
|
key="tablist"
|
||
|
|
sticky={sticky}
|
||
|
|
variant="soft"
|
||
|
|
underlinePlacement={{ top: 'bottom', bottom: 'top' }[sticky]}
|
||
|
|
>
|
||
|
|
<Tab indicatorPlacement={{ top: 'bottom', bottom: 'top' }[sticky]} value="top">
|
||
|
|
Sticky top
|
||
|
|
</Tab>
|
||
|
|
<Tab
|
||
|
|
indicatorPlacement={{ top: 'bottom', bottom: 'top' }[sticky]}
|
||
|
|
value="bottom"
|
||
|
|
>
|
||
|
|
Sticky bottom
|
||
|
|
</Tab>
|
||
|
|
</TabList>,
|
||
|
|
<div key="tabpanel">
|
||
|
|
{[...new Array(50)].map((_, index) => (
|
||
|
|
<div key={index}>Long content</div>
|
||
|
|
))}
|
||
|
|
</div>,
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<Tabs
|
||
|
|
aria-label="Sticky tabs"
|
||
|
|
value={sticky}
|
||
|
|
onChange={(event, newValue) => setSticky(newValue)}
|
||
|
|
sx={{ p: 1, maxHeight: 200, overflowY: 'auto' }}
|
||
|
|
>
|
||
|
|
{sticky === 'top' ? items : items.reverse()}
|
||
|
|
</Tabs>
|
||
|
|
);
|
||
|
|
}
|