Dialog

Overview

The Dialog box is a graphical control element in a small window that communicates information to the user and prompts them for a response. The Dialog displays additional information and asks a user for input.

Dialog is the Basic component that contains several Basic components - Atomic such as Alert, DialogContent, and DialogAction.

Please refer to this for more information: https://mui.com/material-ui/react-dialog/#main-content.

Import

CODE

import { Dialog } from '@mui/material'

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Full-width: False	The component Size includes Width and Height with many selectable Size Units, and Full-width.
Layout	Position: None Size Unit: Px	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
Text	Font-family: None Font-weight: None Text align: Left Size Unit: Px	The component Text includes Text, Font-family, Font-size, Font-weight, Font-color, Text-align.
General	Open: False Visibility: none Opacity: 100%	The component General includes Open, Visibility, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<Dialog open={open}>
        <DialogContent>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Email Address"
            type="email"
            fullWidth
            variant="standard"/>
        </DialogContent>
       <DialogAction>
       </DialogAction>     
</Dialog>

Only after Dialog first gets set up, then Alert, DialogContent, and DialogAction can be generated as the above example.

Related Components: