forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 1
/
StickyList.js
35 lines (34 loc) · 967 Bytes
/
StickyList.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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 Sheet from '@mui/joy/Sheet';
export default function StickyList() {
return (
<Sheet
variant="outlined"
sx={{
width: 320,
maxHeight: 300,
overflow: 'auto',
borderRadius: 'sm',
}}
>
<List>
{[...Array(5)].map((_, categoryIndex) => (
<ListItem nested key={categoryIndex}>
<ListSubheader sticky>Category {categoryIndex + 1}</ListSubheader>
<List>
{[...Array(10)].map((__, index) => (
<ListItem key={index}>
<ListItemButton>Subitem {index + 1}</ListItemButton>
</ListItem>
))}
</List>
</ListItem>
))}
</List>
</Sheet>
);
}