I'm using Dialog screen for insert data. so I wrote codes to show dialog screen. but when the dialog show, I can't click previous screen. I want to copy from prev screen and paste to dialog screen. please let me know the way. here is my code.
<Button variant="contained" color="primary" onClick={this.handleClickOpen}>
add customer
</Button>
<Dialog open={this.state.open} onClose={this.handleClickClose}>
<DialogTitle>add customer</DialogTitle>
</Dialog>
Related
I am new to Material UI. So I tried to change an existing code and encountered this issue. I want to change a view to .
This is the existing code
<TableCell>
<Button >
<InfoRounded style={{ color: "teal" }} onMouseOver={handleClickOpen}/>
</Button>
<SimpleDialog open={open} onClose={handleClose} />
</TableCell>
This coding is similar to the example in Material UI.
Material UI coding sample link
This is what I have tried until now
<TableCell>
<Tooltip title ="I need to get the Dialog view here" InfoRounded>
<Button sx={{m:1}}>
<InfoRounded style={{color:"teal"}}/>
</Button>
</Tooltip>
</TableCell>
I need to get the dialog kind of view in this tool tip. Can anyone help me with this? I tried more than a day and still couldn't figure it out.
While I hover the button the dialog card need to show and when I mover the mouse point it need to close the dialog box automatically. (Currently with the first code the dialog box will open when I hover the button, but to close it I need to click the screen)
This piece of code not showing any close icon in the ant design Drawer.
<Drawer
title="Job ID: 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"
placement="right"
closable={false}
onClose={onJobDetailsDrawerClose}
visible={jobDetailsDrawervisible}
width="75%"
closeIcon={<CloseOutlined />}
>
But the drawer API showed this:
Any idea why the Drawer not showing up any close icon?
Appears the close icon is hidden when you specify
closable={false}
Drawer API - closable
Whether a close (x) button is visible on top right of the Drawer
dialog or not.
With this prop set to false the drawer is toggleable externally.
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'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
I am using the react-bootstrap Tab component and wish to include a button in the tab title. To set the text of the title you must pass the desired text as props. I want to include a button to remove the tab, appearing next to the text.
I have tried passing a function that returns the button element, but nothing displays in the tab title.
<Tab eventKey={data.name} title={data.name}>
<Button
className={classes.Button}
variant="secondary"
onClick={() => removeData({ id: data.id })}
>X</Button>
<TemplateTabs name={data.name} />
</Tab>
Right now the above code renders the button inside the tab page, whereas the desired location would be in the tab title. The template tabs component is what displays in the tab page. Ideally, I am looking for a way to continue to use the react-bootstrap Tab component, but be able to render the tab title and button to remove the said tab. Below is the documentation for the Tab component I am implementing from react-bootstrap. Please let me know if any more information would be useful.
https://react-bootstrap.github.io/components/tabs/
The documentation says type node: https://react-bootstrap.github.io/components/tabs/#tab-props
So this should work:
<Tab
eventKey={data.name}
title={
<>
{data.name}
<Button
className={classes.Button}
variant="secondary"
onClick={() => removeData({ id: data.id })}>
X
</Button>
</>
}>
<TemplateTabs name={data.name} />
</Tab>