Question

我正在寻找一些建议，因为我似乎无法将这些项目放在模式上。我希望将其添加为下方的文本和星号项目计数器。底部带有未分配的文本。我尝试了许多布局。到目前为止，这是我的代码：

 const styles = theme => ({
  root: {
    flexGrow: 1,
    overflow: 'hidden',
    padding: theme.spacing(0, 3),
  },
  paper: {
    maxWidth: 800,
    margin: `${theme.spacing(2)}px auto`,
    padding: theme.spacing(2),
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
  },
    playButton: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      "& .rating": {
        flex: 1
    },
  }
});

function Tasks(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm container>
            <Grid item xs container direction="column" spacing={2}>
              <Grid item xs>
              <div className="name-label">
              Name
              </div>
              <Typography variant="h6">
              Order cofee beans
              </Typography>
              <div className="form-divider"></div>
                <Typography variant="body2" color="textSecondary">
                  Process of Description
                </Typography>
              </Grid>
            </Grid>
            <Grid item classes={{ root: props.classes.playButton}}>
      <Grid item xs={3} className="playButton">
        <i class="far fa-play-circle fa-2x"></i>
      </Grid>
      <div className="workers-assigned-label">
      Workers Assigned
    </div>
    <div>
      count / total
    </div>
    <div className="rating">
      Stars go here
    </div>
    <div>
      unassigned
    </div>
    </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

export default withStyles(styles)(Tasks);

我添加了该设计的屏幕截图的图像，以便清楚地了解我要实现的目标。

图片：enter image description here

Answer 1

您将需要这样的内容，其中flex: 1是您想要拉伸并占用任何多余空间的地方。

const styles = theme => ({
  playButton: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
    "& .playButton": {
      position: "absolute",
      top: "80%",
      left: "-55px",
      transform: "translateY(-50%)",
    },
    "& .rating": {
      flex: 1
    }
  }
});

const YourComponent = props => (
  {...}
  <Grid item classes={{ root: props.classes.playButton}}>
    <Grid item xs={3} className="playButton">
      <i class="far fa-play-circle fa-2x"></i>
    </Grid>
    <div className="workers-assigned-label">
      Workers Assigned
    </div>
    <div>
      count / total
    </div>
    <div className="rating">
      stars go here
    </div>
    <div>
      unassigned
    </div>
  </Grid>
  {...}
);

我建议您结帐this resource，以了解可以使用flex做什么。

如何使用Flexbox和Material UI在列中添加项目

1 个答案: