如何将Fab置于循环进度中？

Question

我正在尝试将fab放在圆形进度栏中。有人告诉我我可以为父母使用相对位置，而子女则具有绝对位置。我想保持它的响应速度，因此，如果屏幕按比例缩小，它将看起来一样。

这些都是Material UI组件。

            <div className="event-dialog-header">
                <DialogTitle id="form-dialog-title">Event Details</DialogTitle>   
                <div className="event-dialog-delete">        
                { props.selectedEvent &&
                    <Fab aria-label="delete" size="small" onClick={handleOpenAlert} >
                        {success ? <CheckIcon /> : <DeleteIcon />}
                    </Fab> 
                }
                <CircularProgress size={68}  />
                </div>
            </div>

.event-dialog {
    .event-dialog-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .event-dialog-delete {
            position: relative;
            .MuiCircularProgress-root {
                position: absolute;
                top: 0;
                right: 0;
            }
            .MuiFab-sizeSmall {
                position: absolute;
                top: 0;
                right: 0;
            }
        }
    }
}

这就是我想要做的：

Answer 1

您有正确的起点。您只需要调整Fab的位置和CircularProgress的大小即可。

这是一个有效的示例：

import React from "react";
import ReactDOM from "react-dom";

import Fab from "@material-ui/core/Fab";
import DeleteIcon from "@material-ui/icons/Delete";
import CircularProgress from "@material-ui/core/CircularProgress";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  eventDialogDelete: {
    position: "relative",
    "& .MuiCircularProgress-root": {
      position: "absolute",
      // Moving this a little off the edge prevents horizontal scrollbar from flickering in and out
      top: 3,
      right: 3
    },
    "& .MuiFab-sizeSmall": {
      position: "absolute",
      top: 9,
      right: 9
    }
  }
});

function App() {
  const classes = useStyles();
  return (
    <div className={classes.eventDialogDelete}>
      <Fab aria-label="delete" size="small">
        <DeleteIcon />
      </Fab>
      <CircularProgress size={52} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);