Menu
Im using Material UI Next in a React project. I have the Card component which has an image(Card Media) and text(Card Text) inside it. I also have a button underneath the text. My question is..how to make the whole card clickable? ie. Whether a user presses on the card text, or the card image or the button, it should trigger the onClick event which I call on the button.
475
If you're using react router, this also works. You could add an onClick={clickFunction} to the containing div of the card that links to the same function as the button. Just wrap the whole thing in the Material CardActionArea component. Everything inside of it will be clickable.
The only way to make text clickable is by enclosing it in a component, in this case Link . Seeing that not all of your DB entries have a URL, your best shot would be to use regex to determine whether or not a URL exists and to extract it, then use conditional formatting to inject the Link component.
You can include Action buttons within the Card and customize them. Action button is a div element with e-card-actions class followed by button tag or anchor tag within the card root element. For adding action buttons you can create button or anchor tag with e-card-btn class within the card action element.
Update for v3 — 29 of August 2018
A specific CardActionArea component has been added to cover specifically this case in version 3.0.0 of Material UI.
Please use the following solution only if you are stuck with v1.
What you probably want to achieve is a Card Action (see specification) on the top part of the card.
The Material Components for Web library has this as its first usage example for the Card Component.
You can easily reproduce that exact behaviour by composing MUI Card* components with the mighty ButtonBase component. A running example can be found here on CodeSandbox: https://codesandbox.io/s/q9wnzv7684.
The relevant code is this:
import Card from '@material-ui/core/Card'; import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'; import Typography from '@material-ui/core/Typography'; import ButtonBase from '@material-ui/core/ButtonBase'; const styles = { cardAction: { display: 'block', textAlign: 'initial' } } function MyCard(props) { return ( <Card> <ButtonBase className={props.classes.cardAction} onClick={event => { ... }} > <CardMedia ... /> <CardContent>...</CardContent> </ButtonBase> </Card> ); } export default withStyles(styles)(MyCard) Also I strongly suggest to keep the CardActions component outside of the ButtonBase.
141
With Material UI 4.9.10, this works.
<Card> <CardActionArea href="https://google.com"> <CardContent> <Typography>Click me!</Typography> </CardContent> </CardActionArea> </Card> If you're using react router, this also works.
<Card> <CardActionArea component={RouterLink} to="/questions"> <CardContent> <Typography>Click me!</Typography> </CardContent> </CardActionArea> </Card> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
