List - rkaku/webpack-crash-course GitHub Wiki

Pool

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Divider from '@material-ui/core/Divider';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import AttachMoneyOutlinedIcon from '@material-ui/icons/AttachMoneyOutlined';
import EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    maxWidth: 800,
    backgroundColor: theme.palette.background.paper,
  },
  paper: {
    height: 140,
    width: 100,
  },
  control: {
    padding: theme.spacing(2),
  },
}));

export default function InsetList() {
  const classes = useStyles();

  return (
    <Grid container className={classes.root} spacing={2}>
      <Grid item xs={12}>
      <Paper className={classes.control}>

    <List component="nav" className={classes.root} aria-label="contacts">
      <Divider />
      <ListItem button>
        <ListItemIcon>
        <EmailOutlinedIcon />
        </ListItemIcon>
        <ListItemText primary="Sender Address" />
      </ListItem>
      <Divider variant="middle" />
      <ListItem button>
        <ListItemIcon>
        <EmailOutlinedIcon />
        </ListItemIcon>
        <ListItemText primary="Recipient Address" />
      </ListItem>
      <Divider variant="middle" />
      <ListItem button>
        <ListItemIcon>
          <AttachMoneyOutlinedIcon />
        </ListItemIcon>
        <ListItemText primary="Value" />
      </ListItem>
      <Divider />
          </List>
          </Paper>
      </Grid>
    </Grid>
  );
}

Icon

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import StarIcon from '@material-ui/icons/Star';
import Divider from '@material-ui/core/Divider';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import VpnKeyOutlinedIcon from '@material-ui/icons/VpnKeyOutlined';
import EnhancedEncryptionOutlinedIcon from '@material-ui/icons/EnhancedEncryptionOutlined';
import TagFacesOutlinedIcon from '@material-ui/icons/TagFacesOutlined';
import SecurityOutlinedIcon from '@material-ui/icons/SecurityOutlined';
import SchoolOutlinedIcon from '@material-ui/icons/SchoolOutlined';
import PetsOutlinedIcon from '@material-ui/icons/PetsOutlined';
import FaceOutlinedIcon from '@material-ui/icons/FaceOutlined';
import AttachMoneyOutlinedIcon from '@material-ui/icons/AttachMoneyOutlined';
import MonetizationOnOutlinedIcon from '@material-ui/icons/MonetizationOnOutlined';
import AccessTimeOutlinedIcon from '@material-ui/icons/AccessTimeOutlined';
import FormatColorTextOutlinedIcon from '@material-ui/icons/FormatColorTextOutlined';
import FormatBoldOutlinedIcon from '@material-ui/icons/FormatBoldOutlined';
import MoodOutlinedIcon from '@material-ui/icons/MoodOutlined';
import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
import EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';

Blochchain

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    maxWidth: 800,
    backgroundColor: theme.palette.background.paper,
  },
  paper: {
    height: 140,
    width: 100,
  },
  control: {
    padding: theme.spacing(2),
  },
}));

export default function InsetList() {
  const classes = useStyles();

  return (
    <Grid container className={classes.root} spacing={2}>
      <Grid item xs={12}>
      <Paper className={classes.control}>

    <List component="nav" className={classes.root} aria-label="contacts">
      <Divider />
      <ListItem button>
        <ListItemIcon>
        <VpnKeyOutlinedIcon />
        </ListItemIcon>
        <ListItemText primary="Nonce" />
      </ListItem>
      <Divider variant="middle" />
      <ListItem button>
        <ListItemIcon>
        <AccessTimeOutlinedIcon />
        </ListItemIcon>
        <ListItemText primary="Time" />
      </ListItem>
      <Divider variant="middle" />
      <ListItem button>
        <ListItemIcon>
          <EnhancedEncryptionOutlinedIcon />
        </ListItemIcon>
        <ListItemText primary="Transaction" />
      </ListItem>
      <Divider variant="middle" />
      <ListItem button>
        <ListItemText inset secondary="Alice Address" />
      </ListItem>
      <Divider component="li" variant="inset" />
      <ListItem button>
        <ListItemText inset secondary="Bob Address" />
      </ListItem>
      <Divider component="li" variant="inset" />
      <ListItem button>
        <ListItemText inset secondary="Value" />
      </ListItem>
      <Divider />
          </List>
          </Paper>
      </Grid>
    </Grid>
  );
}

シンプルなList

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Divider from '@material-ui/core/Divider';
import InboxIcon from '@material-ui/icons/Inbox';
import DraftsIcon from '@material-ui/icons/Drafts';
const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
}));
export default function SimpleList() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <List component="nav" aria-label="main mailbox folders">
        <ListItem button>
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="Drafts" />
        </ListItem>
      </List>
      <Divider />
    </div>
  );
}

ネストしたList

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import ListSubheader from '@material-ui/core/ListSubheader';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Collapse from '@material-ui/core/Collapse';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import SendIcon from '@material-ui/icons/Send';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import StarBorder from '@material-ui/icons/StarBorder';
const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
  nested: {
    paddingLeft: theme.spacing(4),
  },
}));
export default function NestedList() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(true);

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <List
      component="nav"
      aria-labelledby="nested-list-subheader"
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">
          Nested List Items
        </ListSubheader>
      }
      className={classes.root}
    >
      <ListItem button onClick={handleClick}>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Inbox" />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          <ListItem button className={classes.nested}>
            <ListItemIcon>
              <StarBorder />
            </ListItemIcon>
            <ListItemText primary="Starred" />
          </ListItem>
        </List>
      </Collapse>
    </List>
  );
}

差し込み

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import StarIcon from '@material-ui/icons/Star';
const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
}));
export default function InsetList() {
  const classes = useStyles();

  return (
    <List component="nav" className={classes.root} aria-label="contacts">
      <ListItem button>
        <ListItemIcon>
          <StarIcon />
        </ListItemIcon>
        <ListItemText primary="Chelsea Otakan" />
      </ListItem>
     <ListItem button>
        <ListItemText inset primary="Eric Hoffman" />
      </ListItem> 
      <ListItem button>
        <ListItemText inset primary="Eric Hoffman" />
      </ListItem> 
    </List>
  );
}
⚠️ **GitHub.com Fallback** ⚠️