I am using ReactJS Cards for my program
import Card from 'material-ui/Card/Card';
I want to go to a link, for example www.google.com, when I press on the card. How do I do this?
routeTo(){
window.open('http://www.google.com'); //This will open Google in a new
}
}
<Card className={classes.card} onClick={()=>this.routeTo()}>
<CardActionArea>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary" onClick={() => alert("Share")}>
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
Use
<a href="https://www.google.com/">
instead of Link component for external links.
Related
I am using Material UI in a React app.
I have implemented cards with expandable dropdowns; click a card, get more info.
I want to implement multiple cards, separately expandable. Currently when I click the down arrow (to expand) on one card all cards expand.
I can't figure out what's going wrong. Here is my code.
const ExpandMore = styled((props) => {
const { expand, ...other } = props;
return <IconButton {...other} />;
})(({ theme, expand }) => ({
transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
}));
function Blogs(){
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<>
<Grid container direction="row" justifyContent="center">
<Grid item xs={4}>
<Box m={6}>
<Card sx={{ maxWidth: 345 }}>
<CardHeader
title="It’s a cocktail o’clock."
subheader="May 14, 2021"
/>
<CardMedia
component="img"
height="194"
image="https://img.freepik.com/free-photo/selection-various-cocktails-table_140725-2909.jpg?w=2000"
alt="Paella dish"
/>
<CardContent>
<Typography variant="body1" color="text.secondary">
Beat The Heat With Chilled Cocktails At The Best Bars In New York.
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>To a foodie, summer means one thing and one thing only – DRINKS!</Typography>
<Typography paragraph>
Yes people, we know it’s hot out there and the only way to quench your thirst is by guzzling down a bunch of ice-cold cocktails
</Typography>
<Typography paragraph>
<h4>1.The Bar Room at The Beekman</h4>
Visit the beautiful Bar Room in the historic Beekman Hotel for high-key romance that really wows.
Do try the whiskey sour.One of the best drinks available.
<h4>2.Dublin House</h4>
You can never go wrong with Sláinte! Margarita,Pot O'Gold, & Irish Old Fashioned
<h4>3.Russian Samovar</h4>
Alpensahne,Amarula Cream Liqueur, Caribou,Feni
</Typography>
</CardContent>
</Collapse>
</Card>
</Box>
</Grid>
<Grid item xs={4}>
<Box m={6}>
<Card sx={{ maxWidth: 345 }}>
<CardHeader
title="Winner Winner Pizza Dinner"
subheader="May 14, 2021"
/>
<CardMedia
component="img"
height="194"
image="https://cdn.shopify.com/s/files/1/0624/9853/articles/20220211142645-margherita-9920.jpg?crop=center&height=800&v=1660843558&width=800"
alt="Paella dish"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
Beat The Heat With Chilled Cocktails At The Best Bars In New York.
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>To a foodie, summer means one thing and one thing only – DRINKS!</Typography>
<Typography paragraph>
Yes people, we know it’s hot out there and the only way to quench your thirst is by guzzling down a bunch of ice-cold cocktails
</Typography>
<Typography paragraph>
<h4>1.The Bar Room at The Beekman</h4>
Visit the beautiful Bar Room in the historic Beekman Hotel for high-key romance that really wows.
Do try the whiskey sour.One of the best drinks available.
<h4>2.Dublin House</h4>
You can never go wrong with Sláinte! Margarita,Pot O'Gold, & Irish Old Fashioned
<h4>3.Russian Samovar</h4>
Alpensahne,Amarula Cream Liqueur, Caribou,Feni
</Typography>
</CardContent>
</Collapse>
</Card>
</Box>
</Grid>
</Grid>
</>
);
}
I am using material UI components and I'm trying to make a card component. I want my text will be in the same row inbox component("phase" and "2" have to be in the same row). However, I couldn't do it. Here is my code;
<Card className={classes.rootMultiple} variant='outlined'>
<CardContent>
<Box>
<Box justifyContent={'start'}>
<Typography
variant='h5'
component='h2'
className={classes.titleMultiple}
>
phase
</Typography>
</Box>
<Box display='flex' justifyContent={'end'}>
<Typography
variant='h7'
component='h2'
className={classes.descriptionMultiple}
>
2
</Typography>
</Box>
</Box>
</CardContent>
</Card>;
Try to specify the display and flexDirection attributes in the parent's Box.
Then use the flex attribute on the children's `Box:
<Card className={classes.rootMultiple} variant='outlined'>
<CardContent>
<Box sx={{
display: 'flex',
flexDirection: 'row',
}}>
<Box flex={1}>
<Typography
variant='h5'
component='h2'
className={classes.titleMultiple}
>
phase
</Typography>
</Box>
<Box flex={0}>
<Typography
variant='h7'
component='h2'
className={classes.descriptionMultiple}
>
2
</Typography>
</Box>
</Box>
</CardContent>
</Card>
You can just write a Grid (that uses flex) with justify-content: space-between.
<Card className={classes.rootMultiple} variant='outlined'>
<CardContent>
<Grid container justifyContent="space-between">
<Grid item>
<Typography
variant='h5'
component='h2'
className={classes.titleMultiple}
>
phase
</Typography>
</Grid>
<Grid item>
<Typography
variant='h7'
component='h2'
className={classes.descriptionMultiple}
>
2
</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
No need to make other components; less is better. Of course you can use Box with flex style, but Grid does it for you.
Note that h7 isn't a valid value for variant inside Typography.
EDIT: I wrote space-between only because your example prints the texts in the margins, but of corse you can use what you want: they will be always in same row.
I'm trying to fit an image in CardMedia. Here's the code:
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image="../public/assets/bnha.jpg"
/>
<CardContent>
<Typography className={classes.title}>
Vigilante: Boku no Hero Academia Illegals Chapter 97
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Mar 13, 2021
</Typography>
</CardContent>
</CardActionArea>
</Card>
I can't figure out why the image won't render. Any idea what the issue is?
Can I use react router Link with CardActionArea?
Here is my code where my css is broken because How can I use Link component
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Link to="/Blog">
<CardActionArea component="div" disableRipple>
<CardMedia
className={classes.media}
image="images/marmik.jpg"
title="Marmik Desai"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Marmik Desai
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
I am front end developer.
</Typography>
</CardContent>
</CardActionArea>
</Link>
If i use below href="" in cardactionarea it will refresh page. I don't want to refresh page.
<CardActionArea href="/Blog" disableRipple>
FOUND SOLUTION
If I use Link as CardActionArea I need to overwrite Link css. I have found below solution.
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<CardActionArea component={Link} to="/Blog">
import { Link as RouterLink } from 'react-router-dom';
import { CardActionArea } from '#material-ui/core';
<CardActionArea component={RouterLink} to={'/Blog'}>
// ...
</CardActionArea >
You can using like this, put you CardActionArea component in Link
return (
<Card className={classes.root}>
<Link to="/Blog" component={CardActionArea}>
<CardMedia
className={classes.media}
image={props.thumbnail}
title={props.thumbnail}
/>
<CardContent>
<Typography gutterBottom variant="h6" component="h6">
{props.title}
</Typography>
<Typography variant='caption' component={"sm"}>
Update at {(Date(props.date).substring(0, 16))}
on {props.category}
</Typography>
<Divider />
<Typography variant="body2" component="p">
{props.subtitle}
</Typography>
</CardContent>
</Link>
<CardActions>
{!props.isAdmin && <Link to={props.admin_url} component={Button} size="small" >Edit</Link>}
<Link to={props.public_url} component={Button} size="small" >Readmore</Link>
</CardActions>
</Card>
);
From the documentation CardActionArea takes two props classes and children, add the link as a child.
<CardActionArea component="div" disableRipple>
<Link to="/Blog">
<CardMedia
className={classes.media}
image="images/marmik.jpg"
title="Marmik Desai"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Marmik Desai
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
I am front end developer.
</Typography>
</CardContent>
</Link>
</CardActionArea>
In CardActionArea set component prop to Link and to to your desired URL. This way you can use browser's back and forward button to navigate in your React application.
For example:
import { Link } from "react-router-dom";
import {
Card,
CardActionArea,
CardContent,
Typography,
} from "#mui/material";
<Card>
<CardActionArea
component={Link}
to="YOUR-URL"
>
<CardContent>
<Typography variant="h5">
Card Title
</Typography>
<Typography variant="body2" color="text.secondary">
Card Description
</Typography>
</CardContent>
</CardActionArea>
</Card>
This is my solution to keep the same Button style.
import { Link, LinkProps } from 'react-router-dom'
import Button from '#material-ui/core/Button'
const CardButton: React.FC<LinkProps> = ({ children, ...linkProps }) => (
<Link style={{ textDecoration: 'none' }} {...linkProps}>
<Button size="small" color="primary">
{children}
</Button>
</Link>
)
This question already has answers here:
How to make MUI Typography without newline?
(6 answers)
Closed 1 year ago.
I would like to apply two different Typography tags to my text, but I don't want a line break in between.
This is what I have:
<Typography variant="title" color="inherit" noWrap>
Project:
</Typography>
<Typography variant="subheading" color="inherit" noWrap>
Example
</Typography>
This is what it looks like (with the line break):
Working example:
https://codesandbox.io/s/jzmz7klzmy
How do I remove the line break?
Wrap those in a display:flex and it will show it in a row.
<div style={{display:"flex"}}>
<Typography variant="title" color="inherit" noWrap>
Project:
</Typography>
<Typography variant="subheading" color="inherit" noWrap>
Example
</Typography>
</div>
codesandbox of edited code.
Edit: You can use style={{marginLeft:10}} on Example to give spacing between the two.
And if you want to align them vertically, give flexDirection:'column' to the style of Project.
Use the display prop on version 4.x
<Typography variant="h1" color="inherit" display="inline">
Project:
</Typography>
<Typography variant="subtitle1" color="inherit" display="inline">
Example
</Typography>
Use the inline prop on version < 4.x
<Typography variant="title" color="inherit" inline>
Project:
</Typography>
<Typography variant="subheading" color="inherit" inline>
Example
</Typography>
https://material-ui.com/api/typography/