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>
Related
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
Using antd for adding an dropdown menu.Its not closing on mouse leave and click of an item inside dropdown.it remains open in the same place when page is scrolled.
<Dropdown className="buy-dropdown" overlay={menu} placement="topLeft" trigger={["click"] >
<Button className="cxe-buy-game-btn" >
<img src="/static/images/cart-buy.svg" /> Buy
</Button>
</Dropdown>
It's because you have mentioned click as trigger. remove this prop so default will be hover or add hover
<Dropdown className="buy-dropdown" overlay={menu} placement="topLeft" trigger={["hover"] >
<Button className="cxe-buy-game-btn" >
<img src="/static/images/cart-buy.svg" /> Buy
</Button>
</Dropdown>
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'm using react-bootstrap's modal to render a modal for my CRUD app when the user clicks on read for an item a modal will pop up with all the info requested. The problem is rendered on first launch of the app and it stays forever. The modal stays on the bottom of the page and my Boolean to show/hide the modal, here's how I call it:
<Modal.Dialog open={this.state.showServiceModal}>
doesn't do anything to help, when I remove the open prop, same result happens: the modal is always visible, and should't models appear on the center of the screen? What gives? The modal appears on the bottom and I want it to appear in the middle and my close modal button doesn't work either, bootstrap's modal is giving me a tough time, how can I fix all of these problems?
Here's my render:
render() {
return (
<div>
<div className="container content">
<div className="row">
<div className="col-6" />
</div>
</div>
<Modal.Dialog open={this.state.showServiceModal}>
<Modal.Header>
<Modal.Title>Service</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
<span>id:</span> {this.state.currentService.id}
</p>
<p>
<span>description:</span> {this.state.currentService.description}
</p>
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onClick={() => this.setState({ showServiceModal: false })}
>
Close
</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
)
}
You are using open prop on Modal.Dialog to open and close modals. But react-bootstrap's documentation has no such API for Modal.Dialog as it used to display static modal.
Use Modal component as parent and make use of the show prop instead. Also use the centered prop to make it vertically centered.
Here is an example:
<Modal
show={this.state.showServiceModal}
onHide={this.handleClose}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
{...}
</Modal>
Here is a demo in sandbox: