如何将Fab放在循环进度中? [英] How do I center a Fab inside a circular progress?

问题描述

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

I am trying to center an fab inside the circular progress bar. I was told I could use relative position for the parent and the children have absolute position. I would like to keep it responsive so if the screen is scaled down it will look the same.

这些都是Material UI组件.

These are both Material UI components.

            <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;
            }
        }
    }
}

这就是我想要做的:

推荐答案

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

You have the right starting point. You just need to adjust the position of the Fab and the size of the 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);

这篇关于如何将Fab放在循环进度中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！