猿问

如何将Material-UI工具栏拆分为左右部分

如何将Material-UI工具栏拆分为左右部分。例如,这是我的工具栏


let EnhancedTableToolbar = props => {

  const { numSelected, classes ,deletefunc} = props;


  return (

    <Toolbar

      className={classNames(classes.root, {

        [classes.highlight]: numSelected > 0,

      })}

    >

      <div className={classes.title}>

        {numSelected > 0 ? (

          <Typography color="inherit" variant="subtitle1">

            {numSelected} selected

          </Typography>

        ) : (

          <Typography variant="h6" id="tableTitle">

            User List

          </Typography>

        )}

      </div>


      <div className={classes.actions}>

        {numSelected > 0 ? (

        <div >


        <div style={{ display: 'inline-block' }}>

          <Tooltip title="Delete">

            <IconButton aria-label="Delete">

              <DeleteIcon onClick={() => { if (window.confirm('Are you sure you wish to delete '+numSelected +' item?')) {deletefunc()} } }>

              </DeleteIcon>

            </IconButton>

          </Tooltip>

        </div>

         <div style={{ display: 'inline-block' }}>

          <Tooltip title="Edit">

            <IconButton aria-label="Edit">

              <EditIcon>

              </EditIcon>

            </IconButton>

          </Tooltip>

            </div>


         </div>



        ) : (

          <Tooltip title="Filter list">

            <IconButton aria-label="Filter list">

              <FilterListIcon />

            </IconButton>

          </Tooltip>

        )}



      </div>

    </Toolbar>

  );

};

我想在工具栏的左侧显示numSelected,并在工具栏的右侧显示“删除”按钮和“编辑”按钮。但是,我的示例输出在numSelected旁边显示了删除按钮和编辑按钮。有人对此问题有任何解决方案吗?


开心每一天1111
浏览 201回答 1
1回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答