React web 下半部分模态

Question

我正在开发ui使用 React JS 的应用程序的响应版本，我正在寻找 下半部分 模态组件。喜欢 react-native-modal 中的那个。我也在使用 material-ui，我不确定是否可以在模态对话框中进行更改以获得相同的结果。

Answer 1

您可以将 reactstrap 与以下内容一起使用 CSS:

.modal-content {
  position: absolute;
  bottom: 0;
}

.modal.show .modal-dialog {
  height: -webkit-fill-available;
}

工作示例stackblitz with reactstrap here

或使用material-UI，使用下面的css（400px是div的宽度，两边都有32px的内边距） ...所以 232px 是这个数字的一半，让我们始终居中 div：

.modalBody {
  left: calc(50% - 232px);
  bottom: 0;
}

以下 JS 的变化来自 material-UI 的 Modal example:

  const body = (
    <div className={`${classes.paper} modalBody`}>
      <h2 id="simple-modal-title">Text in a modal</h2>
      <p id="simple-modal-description">
        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
      </p>
      <SimpleModal />
    </div>
  );

工作示例on code-sandbox here

Answer 2

您可以自定义 Dialog styles with makeStyles utility from material-ui to achieve ，当屏幕到达 xs 断点时应用响应式样式。

import ReactDOM from "react-dom";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";

import "./styles.css";
const useStyles = makeStyles((theme) => ({
  root: {
    [theme.breakpoints.down("xs")]: {
      alignItems: "flex-end" // push the dialog to bottom
    }
  },
  paper: {
    // make the content full width
    [theme.breakpoints.down("xs")]: {
      margin: 0,
      maxWidth: "100%",
      width: "100%"
    }
  }
}));

function App() {
  const classes = useStyles();
  const [open, setOpen] = useState(false);
  const openDialog = () => setOpen(true);
  return (
    <div className="App">
      <Button onClick={openDialog}>Open dialog</Button>
      <Dialog
        open={open}
        onEnter={console.log("Hey.")}
        classes={{ container: classes.root, paper: classes.paper }}
      >
        <DialogTitle>Hello CodeSandbox</DialogTitle>
        <DialogContent>Start editing to see some magic happen!</DialogContent>
      </Dialog>
    </div>
  );
}

您可以在此处查看它的运行情况 https://codesandbox.io/s/material-ui-dialog-sample-forked-pjd64?file=/src/index.js:41-1162（调整大小 window 以查看其变化情况）

React web 下半部分模态

React web bottom half modal

mobile

responsive-design

reactjs

material-ui