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
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
|
import Tabs from '@mui/joy/Tabs';
|
|
import TabList from '@mui/joy/TabList';
|
|
import Tab from '@mui/joy/Tab';
|
|
import TabPanel from '@mui/joy/TabPanel';
|
|
|
|
export default function TabsUnderlinePlacement() {
|
|
const [placement, setPlacement] = React.useState<
|
|
'top' | 'bottom' | 'left' | 'right'
|
|
>('top');
|
|
return (
|
|
<Tabs
|
|
variant="plain"
|
|
aria-label="Placement indicator tabs"
|
|
value={placement}
|
|
onChange={(event, newValue) => setPlacement(newValue as typeof placement)}
|
|
>
|
|
<TabList underlinePlacement={placement}>
|
|
<Tab disableIndicator value="top">
|
|
Top
|
|
</Tab>
|
|
<Tab disableIndicator value="right">
|
|
Right
|
|
</Tab>
|
|
<Tab disableIndicator value="bottom">
|
|
Bottom
|
|
</Tab>
|
|
<Tab disableIndicator value="left">
|
|
Left
|
|
</Tab>
|
|
</TabList>
|
|
<TabPanel value="top">
|
|
underlinePlacement <b>Top</b>
|
|
</TabPanel>
|
|
<TabPanel value="bottom">
|
|
underlinePlacement <b>Bottom</b>
|
|
</TabPanel>
|
|
<TabPanel value="left">
|
|
underlinePlacement <b>Left</b>
|
|
</TabPanel>
|
|
<TabPanel value="right">
|
|
underlinePlacement <b>Right</b>
|
|
</TabPanel>
|
|
</Tabs>
|
|
);
|
|
}
|