I am using antd cards in my react project.
I want to show and hide extra content in my card with mouse hover on the card.
this is my card:
<Card
title="My Card Title"
extra={<Button type="link"> Download </Button>}
>
some content...
</Card>
I want to show Download button just when the mouse hover the card.
How can I control the visibility of extra section in antd card with mouseover?
First, You need an state for show/hide event:
const [show, setShow] = useState(false);
Second, you should make an mouse event function:
const mouseHover = () => setShow(prev => !prev)
And finally add this logic into your card with events like this:
<Card
title="My Card Title"
extra={show ? <Button type="link"> Download </Button> : null}
onMouseEnter={mouseHover}
onMouseLeave={mouseHover}
>
some content...
</Card>
Related
I wnat to add hover on every render row and when hover then download button will be show.
enter image description here
Do it with css like
.row-with-download:hover button {
display: block;
}
or like
const [isShown, setIsShown] = useState(false);
<Row onMouseEnter={() => setIsShown(true)}
onMouseLeave={() => setIsShown(false)}>
{isShown && <button/>}
Let's say I have a button that opens a Dialog component. The button has custom theming/styling to specify various states, one of them being the :focus state:
const useStyles = makeStyles({
root: {
"&:focus": {
backgroundColor: "#3A7DA9"
}
}
});
export default function App() {
const [open, setOpen] = useState(false);
const classes = useStyles();
return (
<div className="App">
<Button
id="button-that-opens-modal"
className={classes.root}
onClick={() => setOpen(true)}
>
Open the modal
</Button>
<Dialog open={open}>
<h3>This is the modal</h3>
<Button onClick={() => setOpen(false)}>
Close
</Button>
</Dialog>
</div>
);
}
What I've noticed is that every time I have this pattern, (where a button opens a dialog modal), when the modal is closed, the #button-that-opens-modal is left with a :focus state, which looks bad in terms of styling. Here's a quick gif:
Codesandbox demonstrating the issue
Is this a known issue? I don't see why the :focus should be automatically applied to the button when the modal closes. How can I stop this?
I tried this:
I can add a ref to the button, and make sure to manually unfocus the button in various places. Adding it in the onExited method of the Dialog works, but flashes the focus state for a second:
export default function App() {
const [open, setOpen] = useState(false);
const buttonRef = useRef();
const classes = useStyles();
return (
<div className="App">
<Button
ref={buttonRef}
className={classes.root}
onClick={() => setOpen(true)}
>
Open the modal
</Button>
<Dialog
open={open}
TransitionProps={{
onExited: () => {
buttonRef.current?.blur(); // helps but creates a flash
}
}}
>
<h3>This is the modal</h3>
<Button onClick={() => {setOpen(false)}}>
Close
</Button>
</Dialog>
</div>
);
}
sandbox showing this very imperfect solution
And even if I found exactly the right event handler to blur the button such the styling looks correct, this is not something I want to do for every Dialog in an app that has many Button - Dialog pairs. Is there a Material-UI prop I can use to disable this 'auto-focus' back on the button, rather than having to create a ref and manually .blur it for every Dialog?
This is for accessibilty purpose. You can disable it by adding prop disableRestoreFocus on your Dialog :)
I have a rectangle div box on my page that contains various elements including a Font Awesome download icon. I want to display a specific text when the user hovers over the entire div, and then I want to change that text when the download button is hovered. I see the text change/show when the div is hovered, but don't see the text change when the download button is hovered. I added a console log in the download hover and that does show up. So I'm guessing the component is not re-rendering to display the updated text.
const [viewDownloadText, setViewDownloadText] = useState('');
...
return (
<div
className={'product d-flex'}
key={product.id}
onClick={() => openPDF(product.name)}
onMouseOver={() => setViewDownloadText('Click to view')}
onMouseOut={() => setViewDownloadText('')}
>
{viewDownloadText && (
<div className={'click-text'}>{viewDownloadText}</div>
)}
<FontAwesomeIcon
className={'SDS-download'}
icon={faFileDownload}
size={'2x'}
onMouseOver={() => {
console.log('download set!');
setViewDownloadText('Click to download');
}}
onMouseOut={() => {
setViewDownloadText('Click to view');
}}
/>
</div>
);
I am able to use hover and click functionality separately in material ui Tooltip.
Now i want following functionality using both.
when i hover the tooltip should open. If i click the tooltip should remain open unless i close it.
I have done following to achive hover and onclick
1. initially disableHoverListener is false as a result am able to show tooltip on hover
2. when i click on the button to open the tool tip i set open = true. The tooltip remains open. If i try to close the tool tip am able to set the open = false. but the tooltip doesnot close until i move the mouse.
Can someone guide me in solving the problem
Here is the code for whatever I could understand from your description.
You want the tooltip to show on hover (default behaviour). But if you make it controlled component. i.e you want to set open true on click and false otherwise the default behaviour won't work.
Working Example: CodeSandbox
Here's code hope it helped.
const [show, setShow] = React.useState(false);
const handleClick = () => {
if (show) {
setShow(false);
} else {
setShow(true);
}
};
return (
<div
style={{ display: "inline" }}
onMouseOver={() => setShow(true)}
onMouseLeave={() => setShow(false)}
>
<Tooltip title="You want to see me!" open={show} onClick={handleClick}>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
</div>
);
I want to open a new page in the same tab on clicking middle mouse button.
Here is what i am trying to do...
I have a card component that contains image and footer. When i click middle mouse button on image it should open a new page in the same tab. It opens the new page in the same tab if i click left mouse button. However on clicking middle mouse button it opens the page in new tab...I want to prevent that. Below is the code.
render = () => {
return (
<div className="card">
<Link style={{textDecoration: 'none'}} to="/card/new">
<div>
<Image
/>
</div>
</Link>
<div className="footer">
<div className="info">
<h4>{model.modelname}</h4>
</div>
</div>
</div>
);
};
Can somebody guide me how to prevent the page from opening in new tab on middle mouse click? Thanks.
You can add a mouseDown event and then detect the middle button click like
handleMouseDown = (e) => {
if(e.which === 2) {
// do something on middle mouse button click
}
}
You code might look like
class MyComponent extends Component {
handleMouseDown() {
if(e.which === 2) {
// do something on middle mouse button click
// like this.props.history.push('/card/new');
}
}
render() {
<div style={{textDecoration: 'none'}} onMouseDown={this.handleMouseDown} />
}
}
export default withRouter(MyComponent);