Is it possible to add arrow to material UI popover component?
Thanks,
I think this is what you want (Without using popper Component)
You will need to override background color of Popover's child component i.e. paper with transparent color;
Using psudo element of Box Component to create an arrow element.
import * as React from "react";
import Popover from "#mui/material/Popover";
import Typography from "#mui/material/Typography";
import Button from "#mui/material/Button";
import Box from "#mui/material/Box";
export default function BasicPopover() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
return (
<div style={{ width: 400, height: 200, backgroundColor: "lightblue" }}>
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
Open Popover
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
PaperProps={{
style: {
backgroundColor: "transparent",
boxShadow: "none",
borderRadius: 0
}
}}
>
<Box
sx={{
position: "relative",
mt: "10px",
"&::before": {
backgroundColor: "white",
content: '""',
display: "block",
position: "absolute",
width: 12,
height: 12,
top: -6,
transform: "rotate(45deg)",
left: "calc(50% - 6px)"
}
}}
/>
<Typography sx={{ p: 2, backgroundColor: "white" }}>
The content of the Popover.
</Typography>
</Popover>
</div>
);
}
Here is working Demo: basic Popover With Arrow
If you'd like to use a Popper instead, then the following sandbox has a component you should be able to copy straight into your codebase (typescript): RichTooltip. The standard Tooltip was not that suited to rich content for our project and did not allow buttons, selecting text, etc.
https://codesandbox.io/s/popper-with-arrow-58jhe
If you want arrow to a button which open popover you can just put html for arrow there.
<Button aria-describedby={id} variant="contained" color="primary" onClick={handleClick}>
Open Popover <img src="//path-for-arrow-image" />
</Button>
<Popover {...propsOfPopover}> {children} </Popover>
Related
I added swipeable drawer based on the documentation:
Swipeable You can make the drawer swipeable with the SwipeableDrawer
component.
This component comes with a 2 kB gzipped payload overhead. Some
low-end mobile devices won't be able to follow the fingers at 60 FPS.
You can use the disableBackdropTransition prop to help.
{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
>
{list(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
The problem with this is that it's only draggable on mobile device. Is it possible to make it draggable on desktop?
Like the user clicks on the edge with the cursor and drags the drawer to close or open it.
Especially, by adding an edge that the user can click on with the cursor:
Swipeable edge You can configure the SwipeableDrawer to have a visible
edge when closed.
If you are on a desktop, you can toggle the drawer with the "OPEN"
button. If you are on mobile, you can open the demo in CodeSandbox
("edit" icon) and swipe.
import * as React from 'react';
import PropTypes from 'prop-types';
import { Global } from '#emotion/react';
import { styled } from '#mui/material/styles';
import CssBaseline from '#mui/material/CssBaseline';
import { grey } from '#mui/material/colors';
import Button from '#mui/material/Button';
import Box from '#mui/material/Box';
import Skeleton from '#mui/material/Skeleton';
import Typography from '#mui/material/Typography';
import SwipeableDrawer from '#mui/material/SwipeableDrawer';
const drawerBleeding = 56;
const Root = styled('div')(({ theme }) => ({
height: '100%',
backgroundColor:
theme.palette.mode === 'light' ? grey[100] : theme.palette.background.default,
}));
const StyledBox = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'light' ? '#fff' : grey[800],
}));
const Puller = styled(Box)(({ theme }) => ({
width: 30,
height: 6,
backgroundColor: theme.palette.mode === 'light' ? grey[300] : grey[900],
borderRadius: 3,
position: 'absolute',
top: 8,
left: 'calc(50% - 15px)',
}));
function SwipeableEdgeDrawer(props) {
const { window } = props;
const [open, setOpen] = React.useState(false);
const toggleDrawer = (newOpen) => () => {
setOpen(newOpen);
};
// This is used only for the example
const container = window !== undefined ? () => window().document.body : undefined;
return (
<Root>
<CssBaseline />
<Global
styles={{
'.MuiDrawer-root > .MuiPaper-root': {
height: `calc(50% - ${drawerBleeding}px)`,
overflow: 'visible',
},
}}
/>
<Box sx={{ textAlign: 'center', pt: 1 }}>
<Button onClick={toggleDrawer(true)}>Open</Button>
</Box>
<SwipeableDrawer
container={container}
anchor="bottom"
open={open}
onClose={toggleDrawer(false)}
onOpen={toggleDrawer(true)}
swipeAreaWidth={drawerBleeding}
disableSwipeToOpen={false}
ModalProps={{
keepMounted: true,
}}
>
<StyledBox
sx={{
position: 'absolute',
top: -drawerBleeding,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
visibility: 'visible',
right: 0,
left: 0,
}}
>
<Puller />
<Typography sx={{ p: 2, color: 'text.secondary' }}>51 results</Typography>
</StyledBox>
<StyledBox
sx={{
px: 2,
pb: 2,
height: '100%',
overflow: 'auto',
}}
>
<Skeleton variant="rectangular" height="100%" />
</StyledBox>
</SwipeableDrawer>
</Root>
);
}
SwipeableEdgeDrawer.propTypes = {
/**
* Injected by the documentation to work in an iframe.
* You won't need it on your project.
*/
window: PropTypes.func,
};
export default SwipeableEdgeDrawer;
const useStyles = makeStyles({
buttonStyle: {
color: "red",
background: "black",
"&hover": {
transform: "scale(10)",
background: "black",
},
},
});
i what to button to be flat without hover effect and to be scale by 10% and i
do not know how?
return (
<div>
<h1>Heloo</h1>
<Button
className={classes.buttonStyle}
style={{ backgroundColor: "transparent" }}
variant="contained"
onClick={() => butttonHandler()}
>
helooo
</Button>
</div>
);
You have the wrong CSS selector for styling the hover effect. It should be &:hover instead of &hover.
You should use transform: "scale(1.1)" to scale the button by 10% on hover. Here's the documentation on scale()
You can add the disableElevation prop to the Button component. It disables elevation on hover and keep the button "flat"
const useStyles = makeStyles({
buttonStyle: {
color: "red",
background: "black",
"&:hover": {
transform: "scale(1.1)", // Scale by 10%
background: "black"
}
}
});
return (
<Button
className={classes.buttonStyle}
disableElevation
variant="contained"
>
helooo
</Button>
);
Note: In your original code, you are setting the button background to be black in your makeStyles styling, but then you are overwriting it with style={{ backgroundColor: "transparent" }} inside your Button component.
These are my codes for the Button. Somehow, background color only works if I do declare the style in the Button itself. Stating the background color in the const useStyles does not work, hence, I only did this. How can I code this where the background color changes when it hover on it?
<Button
variant="contained"
{...otherProps}
className={classes.margin}
style={{ backgroundColor: " #e31837" }}
>
{children}
</Button>
you can use the root property to change your button style (docs), and also change its background on hover:
const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'blue'
}
}
}));
<Button
variant="contained"
{...otherProps}
className={classes.root}
style={{ backgroundColor: " #e31837" }}
>
{children}
</Button>
You can add this to the styles:
'&:hover': {
backgroundColor: ‘red’
}
<Button
variant="contained"
{...otherProps}
className={classes.margin}
onMouseOver={this.toggleHover}
onMouseOut={this.toggleHover}
style={btnStyle}
>
{children}
</Button>
Then add a toggleHover function
toggleHover(){
this.setState({hover: !this.state.hover})
}
Finally on your render function set your style as a variable
let btnStyle = {'backgroundColor: #e31837'};
if (this.state.hover) {
btnStyle = {'backgroundColor: #000000'}
}
You can refer the following code snippet
import React from 'react';
import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import { green, purple } from '#material-ui/core/colors';
const ColorButton = withStyles((theme) => ({
root: {
color: theme.palette.getContrastText(purple[500]),
backgroundColor: purple[500],
'&:hover': {
backgroundColor: purple[700],
},
},
}))(Button);
export default function CustomizedButtons() {
const classes = useStyles();
return (
<div>
<ColorButton variant="contained" color="primary" className={classes.margin}>
Custom CSS
</ColorButton>
</div>
)
}
I want to change the font size of the label in material ui badge.
I am using style={{ fontSize: "15" }} but that only affect its child, which is an icon.
Code:
<Badge badgeContent={props.cartCount} color="secondary" style={{ fontSize: "15" }}>
<ShoppingCart className={classes.mediumIcon} />
</Badge>
Ideal way would be use classes badge as mentioned in documentation
import { Badge } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
import "./styles.css";
const useStyles = makeStyles((theme) => ({
badge: {
fontSize: 30
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Badge
badgeContent={"h"}
color="secondary"
classes={{ badge: classes.badge }}
/>
</div>
);
}
If you use mui system then this can change badge font size
<Badge
badgeContent={9}
color="error"
overlap="circular"
sx={{ "& .MuiBadge-badge": { fontSize: 9, height: 15, minWidth: 15 } }}
>
<IconButton sx={{ p: 0, color: "primary.main" }}>
<Notifications />
</IconButton>
</Badge>
You can modify the font-size as below.
create styles of different font-size in useStyles
const useStyles = makeStyles((theme) => ({
font1: {
fontSize: "1rem"
},
)}
And then assign it as below to the Badge component
<Badge
classes={{
badge: classes.font1
}}
badgeContent={99}
{...defaultProps}
/>
Sandbox
You can use the componentProps attribute as follows (this example changes the color of the text in the badge but the same principle will work for fontSize).
<Badge badgeContent={comments} componentsProps={{ root: {style: {color: 'white'}} }}>
<CommentIcon />
</Badge>
Using material-ui in my react app, is there a way I can change the position when the dialog is opened? now it's always centered.
Thanks in advance!
You can create styles and pass it through classes prop. Here is an example of how you could do that.
import React from 'react';
import { makeStyles, Dialog } from '#material-ui/core';
const useStyles = makeStyles({
dialog: {
position: 'absolute',
left: 10,
top: 50
}
});
function Example() {
const classes = useStyles();
return (
<Dialog
classes={{
paper: classes.dialog
}}
/* rest of the props */
>
{/* content of the dialog */}
</Dialog>
);
}
I would say don't use position: absolute, it could break the scrolling behavior. The position was control differently with scroll='paper' or scroll='body'
You can use the following code to always align your dialog to the top of the page with two custom classes.
Demo: codesandbox.io
See the original article with explanation
const useStyles = makeStyles({
topScrollPaper: {
alignItems: 'flex-start',
},
topPaperScrollBody: {
verticalAlign: 'top',
},
})
function SimpleDialog(props: SimpleDialogProps) {
const classes = useStyles()
return (
<Dialog
onClose={handleClose}
aria-labelledby="simple-dialog-title"
open={open}
scroll="paper"
classes={{
scrollPaper: classes.topScrollPaper,
paperScrollBody: classes.topPaperScrollBody,
}}
></Dialog>
)
}
For MUI 5, we can use both SxProps and styled() utility:
Via SxProps:
// flex-start: to position it at the top
// flex-end: to position it at the bottom
// center: to position it at the center
const sx: SxProps = {
"& .MuiDialog-container": {
alignItems: "flex-start"
}
};
<Dialog
open={infoModalOpen}
onClose={() => setInfoModalOpen(false)}
sx={sx}
scroll="paper"
>
....
</Dialog>
Via styled components:
const StyledDialog = styled(Dialog)(({theme}) => ({
"& .MuiDialog-container": {
alignItems: "flex-start"
}
}));
<StyledDialog
open={infoModalOpen}
onClose={() => setInfoModalOpen(false)}
sx={sx}
scroll="paper"
>
....
</StyledDialog>
#radovix's and #Sumit Wadhwa's answers are correct. In case you don't want to use makeStyles, Here is how I resolved it.
When scroll="body";
<Dialog
fullWidth
onClose={() => setOpen(false)}
open={true}
scroll="body"
PaperProps={{ sx: { mt: "50px", verticalAlign: "top" } }}
>
{/* Dialog Content here */}
</Dialog>;
When scroll="paper";
<Dialog
fullWidth
onClose={() => setOpen(false)}
open={true}
scroll="paper"
sx={{
"& .MuiDialog-container": {
alignItems: "flex-start",
},
}}
PaperProps={{ sx: { mt: "50px" } }}
>
{/* Dialog Content here */}
</Dialog>;
You can adjust the margin-top however you like