Material UI is a Material Design library made for React.
It’s a set of React components that have Material Design styles.
In this article, we’ll look at how to add dialog boxes with Material UI.
A dialog box is used to let users know about some information.
To add one, we can use the Dialog
component.
For example, we can write:
import React from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
export default function App() {
const [open, setOpen] = React.useState(false);
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={() => setOpen(true)}>
Open simple dialog
</Button>
<Dialog onClose={handleClose} open={open}>
<DialogTitle id="simple-dialog-title">dialog</DialogTitle>
<List>
<ListItem autoFocus button onClick={handleClose}>
close
</ListItem>
</List>
</Dialog>
</div>
);
}
to add a dialog with some items in it.
We added a List
with a ListItem
which is a button.
We can click it to close the dialog box with the setOpen
function with the false
argument.
Then open
prop controls whether it’s opened or not.
handleClose
lets us close the dialog by setting open
to false
with setOpen
.
variant
set to outlined
lets us add an outline.
#programming #web-development #javascript #technology #software-development