I'm currently exploring the option of incorporating a Dialog box as a button within a Button Group, which is then nested inside a CardActions component in Material UI.
Previously, I had success with using regular Buttons instead of a Dialog, where the 3 buttons within the CardActions were evenly justified across the width of the component. I am now aiming to maintain this layout while implementing an onClick action that triggers a pop-up Dialog box.
The structure I have is as follows:
<CardActions>
<ButtonGroup
orientation="horizontal"
color="secondary"
aria-label="vertical contained primary button group"
variant="text"
fullWidth
>
<1 />
<2 />
Services</Button>
</ButtonGroup>
</CardActions>Components '1', '2', and '3' are files that contain:
import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import LaunchIcon from '@material-ui/icons/Launch';
export default function ScrollDialog() {
const [open, setOpen] = React.useState(false);
const [scroll, setScroll] = React.useState('paper');
const handleClickOpen = (scrollType) => () => {
setOpen(true);
setScroll(scrollType);
};
const handleClose = () => {
setOpen(false);
};
const descriptionElementRef = React.useRef(null);
React.useEffect(() => {
if (open) {
const { current: descriptionElement } = descriptionElementRef;
if (descriptionElement !== null) {
descriptionElement.focus();
}
}
}, [open]);
return (
<div>
<Button color="secondary" onClick={handleClickOpen('paper')}>
1
</Button>
<Dialog
open={open}
onClose={handleClose}
scroll={scroll}
aria-labelledby="scroll-dialog-title"
aria-describedby="scroll-dialog-description"
maxWidth="sm"
>
<DialogTitle id="scroll-dialog-title">Sampling Techniques</DialogTitle>
<DialogContent dividers={scroll === 'paper'}>
<DialogContentText
id="scroll-dialog-description"
ref={descriptionElementRef}
tabIndex={-1}
>
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
</div>
);
}
Although the Dialog displays as expected like a modal, the alignment styling of the buttons from the ButtonGroup within Card Actions doesn't remain intact - unlike when regular buttons were directly utilized in that specific Card Action component.
Hence my question - is it feasible to embed a Dialog box within a Card Action?