I'm using material ui dialog, and i want to insert a table inside dialog.
Can I do that?
<Button
variant="contained"
color="secondary"
onClick={this.handleOpenDialog}
>
Cancel
</Button>
<Dialog
agree={() =>
this.handleCloseDialog
}
open={this.state.openDialog}
title="Are you sure?"
dialog="Your data will be deleted!"
onClose={this.handleCloseDialog}
></Dialog>
Place the table inside a DialogContent component within your dialog: https://material-ui.com/components/dialogs/#AlertDialog.js
Related
How to collapse Modal Material UI?
I'm using a Modal component mui and want to collapse the modal window? Tell me how to do it?
You mean close it?
Well, if that's the case this is how you do it.
<Dialog
onClose={() => setModal(false)}
>
<your divs here/>
</Dialog>
So I am trying to display a message when a button is clicked but what it does is that when the page is loaded it displays message boxes (which should not happen) but it doesn't work on onclick I have attached the screenshots to my code and views.
You need to pass your function to the onClick parameter, not invoke it.
<Button type="primary" shape="round" onClick={() => info()} />
or
<Button type="primary" shape="round" onClick={info} />
Everything is in the title. Here is the CodeSandbox with reproduction !
When using MUI's ButtonGroup, the layout is fine with three "regular" buttons:
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
Result:
But as soon as we add an href to one of the buttons, it breaks the layout, like so:
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button href="test.com">One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
Result:
Is there any way to fix this ? I don't want to have to use the trick of onClick and location.replace or location.href...
Also, maybe I should post this as an issue on MUI's GitHub? I'm guessing only if it is relevant and not fixable, but there are so many I doubt they would see it.
Use the prop LinkComponent="button":
import * as React from "react";
import Button from "#mui/material/Button";
import ButtonGroup from "#mui/material/ButtonGroup";
export default function BasicButtonGroup() {
return (
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button LinkComponent="button" href="test.com">
One
</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
);
}
Demo: https://codesandbox.io/s/basicbuttongroup-material-demo-forked-43pmhn?file=/demo.js:0-430
I am using Material ui Button. this button should hold an image & button-name as its child. i don't want to use as one of the children of my Button, but i want to do it by passing startIcon prop to Button. button should look like:-
i have tried this:-
<Button className={classes.navButtons} startIcon={ZapierIcon}>
Zapier
</Button>
but it is showing path of my image in button instead of actual image....can anyone give some suggestion what i am doing wrong.
Just pass the Avatar in place of icon.
<Button
variant="contained"
color="secondary"
startIcon={<Avatar src={'http://www.wpsimplesponsorships.com/wp-content/uploads/2019/05/cropped-icon-256x256.png'} />}
>
Delete
</Button>
https://codesandbox.io/s/bold-dew-3rl6z
I need to add another button on the Modal footer. How can i do it? In the documents you can only edit the ok and cancel buttons, but doesn't have a docs on how to add another button.
Use footer property of Modal which accepts an array of components.
<Modal
visible={true}
footer={[
<Button key="1">1</Button>,
<Button key="2">2</Button>,
<Button key="3" type="primary">
3
</Button>
]}
>
<p>Some contents...</p>
</Modal>