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
53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
import * as React from 'react';
|
|
import List from '@mui/joy/List';
|
|
import ListItem from '@mui/joy/ListItem';
|
|
import ListSubheader from '@mui/joy/ListSubheader';
|
|
import ListItemButton from '@mui/joy/ListItemButton';
|
|
import Typography from '@mui/joy/Typography';
|
|
import Switch from '@mui/joy/Switch';
|
|
|
|
export default function NestedList() {
|
|
const [small, setSmall] = React.useState(false);
|
|
return (
|
|
<div>
|
|
<Switch
|
|
size="sm"
|
|
checked={small}
|
|
onChange={(event) => setSmall(event.target.checked)}
|
|
endDecorator={
|
|
<Typography level="body-sm">Toggle small nested list</Typography>
|
|
}
|
|
sx={{ mb: 2 }}
|
|
/>
|
|
<List
|
|
variant="outlined"
|
|
size={small ? 'sm' : undefined}
|
|
sx={{ width: 200, borderRadius: 'sm' }}
|
|
>
|
|
<ListItem nested>
|
|
<ListSubheader>Category 1</ListSubheader>
|
|
<List>
|
|
<ListItem>
|
|
<ListItemButton>Subitem 1</ListItemButton>
|
|
</ListItem>
|
|
<ListItem>
|
|
<ListItemButton>Subitem 2</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
</ListItem>
|
|
<ListItem nested>
|
|
<ListSubheader>Category 2</ListSubheader>
|
|
<List>
|
|
<ListItem>
|
|
<ListItemButton>Subitem 1</ListItemButton>
|
|
</ListItem>
|
|
<ListItem>
|
|
<ListItemButton>Subitem 2</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
</ListItem>
|
|
</List>
|
|
</div>
|
|
);
|
|
}
|