I am trying to load a picture using Material UI card component. Everything seems to load except for the actual picture. I have tried all possible ways and other suggestions from the net but no luck.
Here is my code.
I've tried the imageURL, path i even copied the path exactly from the folder structure to see if i wrote it wrong.
import Card from '#mui/material/Card';
import CardMedia from '#mui/material/CardMedia';
import { Button, CardActionArea, CardActions } from '#mui/material';
function DisplayProjectCard(props) {
return (
<Card elevation={0}
sx={{ maxWidth: 645,
backgroundColor: "transparent", p:4 }}>
<CardActionArea>
<CardMedia
component="img"
title="My Next Promo App landing page"
height="240"
width="440"
image="src/static/images/MyNextPromoApp.png"
alt="Home page of My Next Promo App"
/>
</CardActionArea>
<CardActions sx={{
justifyContent:'center'
}}>
<Button size="small" color="primary">
View
</Button> |
<Button size="small" color="primary">
Github
</Button>
</CardActions>
</Card>
);
}
export default DisplayProjectCard```
Related
I tried material ui and i cant figure out how to alight buttons to the right ((
import * as React from "react";
import SvgIcon from "#mui/material/SvgIcon";
import Button from "#mui/material/Button";
import { AppBar, IconButton, Toolbar, Typography } from "#mui/material";
import { Box, Container } from "#mui/system";
import MenuIcon from "#mui/icons-material/Menu";
import { makeStyles } from "#mui/material/styles";
const boxDefault = {};
function App() {
//const classes = useStyles();
return (
<AppBar position="fixed">
<Container fixed>
<Toolbar>
<IconButton
Edge="start"
color="inherit"
aria-label="menu"
//className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="h5" /*className={classes.title}*/>
Hotels Ua
</Typography>
<Box mr={1}>
<Button color="inherit" variant="outlined">
Log in
</Button>
</Box>
<Box>
<Button color="secondary" variant="contained">
Sign up
</Button>
</Box>
</Toolbar>
</Container>
</AppBar>
);
}
export default App;
I found instruction how to aligh in material ui but after trying still no result....
display="flex"
justifyContent="flex-end"
alignItems="flex-end"
sx={boxDefault}
but no effect.
I am just started with mui.
Assuming that the goal is to make the logo and title to the left, and the buttons to the right on the nav bar, change the title element like this:
<Typography variant="h5" sx={{ flexGrow: 1}}/>
Hotels Ua
</Typography>
This will make the title element grow in this layout, and push the buttons to the right, which hopefully is the intended result, but do specify if not as it will help to find the proper solution.
I'm trying to use the MUI divider in React. However, it doesn't seem to work; I currently have:
import * as React from "react";
import IconButton from "#mui/material/IconButton";
import ShareIcon from "#mui/icons-material/Share";
import ReportGmailerrorredIcon from "#mui/icons-material/ReportGmailerrorred";
import Divider from "#mui/material/Divider";
import "./settings.css";
function Settings() {
return (
<div className="body">
<div className="media_interact">
<div className="media_buttons">
<IconButton size="medium" sx={{ ml: 2 }}>
<ShareIcon fontSize="large" />
</IconButton>
<IconButton size="medium" sx={{ ml: 2 }}>
<ReportGmailerrorredIcon fontSize="large" />
</IconButton>
</div>
<Divider
orientation="vertical"
variant="middle"
flexItem
sx={{ color: "black" }}
/>
Hello
</div>
</div>
);
}
export default Settings;
which, as you can see from the Sandbox, doesn't produce the Divider at all and the Hello text element after:
I'm hoping for some guidance in terms of how to use it?
I am beginner in react.
I am traying to use Card from bootstrap like this:
import React from "react";
import { Card, Button } from "#material-ui/core";
const ProtfolioSection: React.FC = () => {
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="src/img/background.png" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
};
export default ProtfolioSection;
I got an error:
Property 'Img' does not exist on type '(props: CardProps) => Element'.ts(2339)
Property 'Body' does not exist on type '(props: CardProps) => Element'.ts(2339)
and so on..
Someone know how to fix it and to handle this?
Thanks.
You are importing from #material-ui/core, not from react-bootstrap.
Here is how to get it working with material-ui:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardActionArea from '#material-ui/core/CardActionArea';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
});
export default function MediaCard() {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" 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">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}
Here is how to get it working with react-bootstrap:
import React from 'react';
import { Card, Button } from 'react-bootstrap';
export const PortfolioSection: React.FC = () => {
return <Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
}
I am adding a card view in my webpage. But the contents in the card gets loaded in the normal view instead of card view.
Here's the Sample code i tried:
import React, { Component } from "react";
import MuiThemeProvider from "#material-ui/core/styles/MuiThemeProvider";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Typography from "#material-ui/core/Typography";
import Button from "#material-ui/core/Button";
import IconButton from "#material-ui/core/IconButton";
import MenuIcon from "#material-ui/icons/Menu";
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 { makeStyles } from "#material-ui/core/styles";
import CardActionArea from "#material-ui/core/CardActionArea";
class HomePage extends Component {
render() {
return (
<div>
<div className={{ flexGrow: 1 }}>
<AppBar style={{ background: "#0080ff" }} position="static">
<Toolbar>
<Typography
color="inherit"
variant="h4"
className={{ flexGrow: 1 }}
>
My Page
</Typography>
<Button color="inherit">Home</Button>
</Toolbar>
</AppBar>
</div>
<div>
<Card className={{ maxWidth: 345 }}>
<CardActionArea>
<CardMedia
className={{ height: 140 }}
image="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"
title="My App"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Welcome to My APP
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Go to Login Page
</Button>
</CardActions>
</Card>
</div>
</div>
);
}
}
export default HomePage;
The contents get loaded but without the card view. I checked material ui website card in material ui website But I don't know where I am doing wrong. Help me with some solutions
This is the output page i got without card view:
try adding in card media the following prop.
component="img"
Add styles individually like making a styles objects.Not adding styles in classname.
What data is not loading in the card view? Please can you be elaborate!
I faced the same problem. It is resolved by wrapping the HomePage component within a Container
<Container>
<HomePage />
</Container>
I am using material ui album template for my react app
I want to put different image and different text for each cards for this when I remove this array it create the problems in responsiveness of the cards
I tried to put separte grid for each cards but thats some how solve the issue but that responsiveness of the template does not remain same
here is my demo code
https://codesandbox.io/s/material-demo-pz8df
Make sure you're updating the right cards array. Use an array of objects as well, where each object has a key for an image-link and one for the description. In the .map() we'll use these values to render the content. Here's a working sandbox: https://codesandbox.io/s/material-demo-3v44c
The responsiveness will work like expected.
Working code:
import React from "react";
import AppBar from "#material-ui/core/AppBar";
import Button from "#material-ui/core/Button";
import CameraIcon from "#material-ui/icons/PhotoCamera";
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 CssBaseline from "#material-ui/core/CssBaseline";
import Grid from "#material-ui/core/Grid";
import Toolbar from "#material-ui/core/Toolbar";
import Typography from "#material-ui/core/Typography";
import { makeStyles } from "#material-ui/core/styles";
import Container from "#material-ui/core/Container";
import Link from "#material-ui/core/Link";
function MadeWithLove() {
return (
<Typography variant="body2" color="textSecondary" align="center">
{"Built with love by the "}
<Link color="inherit" href="https://material-ui.com/">
Material-UI
</Link>
{" team."}
</Typography>
);
}
const useStyles = makeStyles(theme => ({
icon: {
marginRight: theme.spacing(2)
},
heroContent: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(8, 0, 6)
},
heroButtons: {
marginTop: theme.spacing(4)
},
cardGrid: {
paddingTop: theme.spacing(8),
paddingBottom: theme.spacing(8)
},
card: {
height: "100%",
display: "flex",
flexDirection: "column"
},
cardMedia: {
paddingTop: "56.25%" // 16:9
},
cardContent: {
flexGrow: 1
},
footer: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(6)
}
}));
const cards = [
{
img:
"https://images.unsplash.com/photo-1564135624576-c5c88640f235?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80",
desc: "Campsite"
},
{
img:
"https://images.unsplash.com/photo-1564198879220-63f2734f7cec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2072&q=80",
desc: "Space"
}
];
export default function Album() {
const classes = useStyles();
return (
<React.Fragment>
<CssBaseline />
<AppBar position="relative">
<Toolbar>
<CameraIcon className={classes.icon} />
<Typography variant="h6" color="inherit" noWrap>
Album layout
</Typography>
</Toolbar>
</AppBar>
<main>
{/* Hero unit */}
<div className={classes.heroContent}>
<Container maxWidth="sm">
<Typography
component="h1"
variant="h2"
align="center"
color="textPrimary"
gutterBottom
>
Album layout
</Typography>
<Typography
variant="h5"
align="center"
color="textSecondary"
paragraph
>
Something short and leading about the collection below—its
contents, the creator, etc. Make it short and sweet, but not too
short so folks don't simply skip over it entirely.
</Typography>
<div className={classes.heroButtons}>
<Grid container spacing={2} justify="center">
<Grid item>
<Button variant="contained" color="primary">
Main call to action
</Button>
</Grid>
<Grid item>
<Button variant="outlined" color="primary">
Secondary action
</Button>
</Grid>
</Grid>
</div>
</Container>
</div>
<Container className={classes.cardGrid} maxWidth="md">
{/* End hero unit */}
<Grid container spacing={4}>
{cards.map(card => (
<Grid item key={card} xs={12} sm={6} md={4}>
<Card className={classes.card}>
<CardMedia
className={classes.cardMedia}
image={card.img}
title="Image title"
/>
<CardContent className={classes.cardContent}>
<Typography gutterBottom variant="h5" component="h2">
Heading
</Typography>
<Typography>{card.desc}</Typography>
</CardContent>
<CardActions>
<Button size="small" color="primary">
View
</Button>
<Button size="small" color="primary">
Edit
</Button>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Container>
</main>
{/* Footer */}
<footer className={classes.footer}>
<Typography variant="h6" align="center" gutterBottom>
Footer
</Typography>
<Typography
variant="subtitle1"
align="center"
color="textSecondary"
component="p"
>
Something here to give the footer a purpose!
</Typography>
<MadeWithLove />
</footer>
{/* End footer */}
</React.Fragment>
);
}