Skip to content

Commit f3dab23

Browse files
siriwatknpsiriwatknp
committed
fix simple list demo
1 parent 9acf8be commit f3dab23

File tree

2 files changed

+58
-44
lines changed

2 files changed

+58
-44
lines changed

‎docs/src/pages/components/lists/SimpleList.js

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import Box from '@material-ui/core/Box';
33
import List from '@material-ui/core/List';
4+
import ListItem from '@material-ui/core/ListItem';
45
import ListItemButton from '@material-ui/core/ListItemButton';
56
import ListItemIcon from '@material-ui/core/ListItemIcon';
67
import ListItemText from '@material-ui/core/ListItemText';
@@ -11,29 +12,35 @@ import DraftsIcon from '@material-ui/icons/Drafts';
1112
export default function SimpleList() {
1213
return (
1314
<Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
14-
<List component="nav" aria-label="main mailbox folders">
15-
<ListItemButton>
16-
<ListItemIcon>
17-
<InboxIcon />
18-
</ListItemIcon>
19-
<ListItemText primary="Inbox" />
20-
</ListItemButton>
21-
<ListItemButton>
22-
<ListItemIcon>
23-
<DraftsIcon />
24-
</ListItemIcon>
25-
<ListItemText primary="Drafts" />
26-
</ListItemButton>
27-
</List>
15+
<nav aria-label="main mailbox folders">
16+
<List>
17+
<ListItemButton component="li">
18+
<ListItemIcon>
19+
<InboxIcon />
20+
</ListItemIcon>
21+
<ListItemText primary="Inbox" />
22+
</ListItemButton>
23+
<ListItemButton component="li">
24+
<ListItemIcon>
25+
<DraftsIcon />
26+
</ListItemIcon>
27+
<ListItemText primary="Drafts" />
28+
</ListItemButton>
29+
</List>
30+
</nav>
2831
<Divider />
29-
<List component="nav" aria-label="secondary mailbox folders">
30-
<ListItemButton>
31-
<ListItemText primary="Trash" />
32-
</ListItemButton>
33-
<ListItemButton component="a" href="#simple-list">
34-
<ListItemText primary="Spam" />
35-
</ListItemButton>
36-
</List>
32+
<nav aria-label="secondary mailbox folders">
33+
<List>
34+
<ListItemButton component="li">
35+
<ListItemText primary="Trash" />
36+
</ListItemButton>
37+
<ListItem disablePadding>
38+
<ListItemButton component="a" href="#simple-list">
39+
<ListItemText primary="Spam" />
40+
</ListItemButton>
41+
</ListItem>
42+
</List>
43+
</nav>
3744
</Box>
3845
);
3946
}

‎docs/src/pages/components/lists/SimpleList.tsx

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import Box from '@material-ui/core/Box';
33
import List from '@material-ui/core/List';
4+
import ListItem from '@material-ui/core/ListItem';
45
import ListItemButton from '@material-ui/core/ListItemButton';
56
import ListItemIcon from '@material-ui/core/ListItemIcon';
67
import ListItemText from '@material-ui/core/ListItemText';
@@ -11,29 +12,35 @@ import DraftsIcon from '@material-ui/icons/Drafts';
1112
export default function SimpleList() {
1213
return (
1314
<Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
14-
<List component="nav" aria-label="main mailbox folders">
15-
<ListItemButton>
16-
<ListItemIcon>
17-
<InboxIcon />
18-
</ListItemIcon>
19-
<ListItemText primary="Inbox" />
20-
</ListItemButton>
21-
<ListItemButton>
22-
<ListItemIcon>
23-
<DraftsIcon />
24-
</ListItemIcon>
25-
<ListItemText primary="Drafts" />
26-
</ListItemButton>
27-
</List>
15+
<nav aria-label="main mailbox folders">
16+
<List>
17+
<ListItemButton component="li">
18+
<ListItemIcon>
19+
<InboxIcon />
20+
</ListItemIcon>
21+
<ListItemText primary="Inbox" />
22+
</ListItemButton>
23+
<ListItemButton component="li">
24+
<ListItemIcon>
25+
<DraftsIcon />
26+
</ListItemIcon>
27+
<ListItemText primary="Drafts" />
28+
</ListItemButton>
29+
</List>
30+
</nav>
2831
<Divider />
29-
<List component="nav" aria-label="secondary mailbox folders">
30-
<ListItemButton>
31-
<ListItemText primary="Trash" />
32-
</ListItemButton>
33-
<ListItemButton component="a" href="#simple-list">
34-
<ListItemText primary="Spam" />
35-
</ListItemButton>
36-
</List>
32+
<nav aria-label="secondary mailbox folders">
33+
<List>
34+
<ListItemButton component="li">
35+
<ListItemText primary="Trash" />
36+
</ListItemButton>
37+
<ListItem disablePadding>
38+
<ListItemButton component="a" href="#simple-list">
39+
<ListItemText primary="Spam" />
40+
</ListItemButton>
41+
</ListItem>
42+
</List>
43+
</nav>
3744
</Box>
3845
);
3946
}

0 commit comments

Comments
 (0)