I am using the antd's Image component since I want that preview functionality it has but the style isn't taking affect when I am trying to add some space between my images. They are just stacked together with no space. The same thing works when I use <img> tag. Any insights on how to tackle this issue?
<div>
<Image style={{marginRight: "15px"}} src={image} />
<Image style={{marginRight: "15px"}} src={image} />
<Image style={{marginRight: "15px"}} src={image} />
</div>
You can leverage AntD's Space component.
<Space size={15}>
<Image src={image} />
<Image src={image} />
<Image src={image} />
</Space>
According to the Image component API, the component doesn't take a style prop.
I would suggest using a wrapper component to apply the margin-right: 15px; rule.
<div>
<div style={{marginRight: "15px"}}>
<Image src={image} />
</div>
<div style={{marginRight: "15px"}}>
<Image src={image} />
</div>
<div style={{marginRight: "15px"}}>
<Image src={image} />
</div>
</div>
Related
I am able to use the <img> tag no problem, but when I try to use the <Image> component, all that displays is an empty square the size of the image. The only way I have been able to get the image to display without using <img> is with the <Avatar> component. It's just a small brand image so it's not a huge deal, but I would like to use the built-in Next.js image optimization. And using <Avatar> does not feel very semantic as well.
It is being displayed inside of a ListItem component like this:
<Drawer variant="permanent" {...other}>
<List disablePadding>
<ListItem
sx={{
justifyContent: 'center',
alignItems: 'center',
}}
>
<Avatar
src="images/icons/agreement2.png"
alt="Scales of Justice Brand Image"
sx={{ width: 50, height: 50 }}
/>
</ListItem>
This is what I have tried so far:
I created a separate component for the image
import Image from 'next/image'
import brandImage from '../public/images/icons/law.png'
export default function Brand() {
return <Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
}
and displaying <Brand /> inside of the <ListItem> in place of the current <Avatar> component.
I tried to import the .png file and use
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
inside of the <ListItem>. And then I tried without importing the image and just using the full file path.
I tried placing <Image> inside of the <Avatar> component.
<Avatar>
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
</Avatar>
I also tried adding in the layout prop with all of the options.
I am using Next.js v12.0.9 and MUI v5.4.2
I recommend creating a parent element with a position responsive and setting the image like this:
<Box sx={{position:'relative'}}>
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
</Box>
You also may set it like:
<Box sx={{position:'relative', height:'50px', width:'50px'}}>
<Image src={brandImage} layout="fill" objectFit="cover" alt="Brand Logo" />
</Box>
This seem to work for me.
<Stack
sx={{
height: "500px",
}}
>
<Image
src={image.data.attributes.url}
alt={image.data.attributes.alternativeText}
width={image.data.attributes.width}
height={image.data.attributes.height}
objectFit="cover"
priority
/>
</Stack>
Using Stack seems to expand the image full width without using width: 100%
I am trying to use Next.js styling as per the docs but the current code only works for the background colour, but does not work for the test class on the image. What am I doing wrong?
<div className="header-bg">
<Container className="pt-5 pb-5">
<Row className="align-items-center">
<Col>
<h1>Welcome to the home page. Here is some text</h1>
<p>Here is some paragraph text</p>
<Button variant="info">Learn More</Button>
</Col>
<Col>
<Image src="chair.png" className="test" />
</Col>
</Row>
</Container>
<style jsx>{`
.header-bg {
background: grey;
}
.test {
max-width: 15px;
}
`}</style>
</div>
I'm currently trying to learn the basics of React so I thought I'd try to mock-up another website. Currently, I'm trying to build a header that looks like Airbnb's
Unfortunately, I can't seem to figure out the aligning and how to get the logo to be all the way on the left side.
Any advice would be appreciated! Thanks!
<Flexbox flexDirection="column">
<Flexbox element="header" height="60px">
<div style={{ flexGrow: 0}}>
<img src={Logo} />
</div>
<div style={{flexGrow: 8}}>
<SearchBar
onChange={() => console.log('onChange')}
onRequestSearch={() => console.log('onRequestSearch')}
style={{
margin: '0 auto',
maxWidth: 800
}}
/>
</div>
<div>
<Button>Become a host</Button>
</div>
<div>
<Button>Sign up</Button>
</div>
<div>
<Button>Log in</Button>
</div>
</Flexbox>
</Flexbox>
I want to make a grid and organize the items in the card like that:
Here is what I have done so far:
<Grid stackable style={{border: '1px solid lack;'}}>
<Grid.Row>
<Grid.Column width={7}>
<Header
style={{ padding: '10px' }}
as="h3"
color={headerColor}
textAlign="left"
content="Church Mutual Worker's Compensation Claim"
/>
</Grid.Column>
<div style={{marginTop: '0px'}}>#ID-1234567</div>
</Grid.Row>
<Grid.Row>
<Grid.Column width={7}>
<p>
Date Recieved: <span style={{color: 'red'}}>07/20/2018</span>
<span style={{marginLeft: '30px'}}>Account Number: 76543210213</span>
</p>
</Grid.Column>
<Grid.Column width={5}>
<Form.Button color="red" size="mini" content="Urgent" />
</Grid.Column>
</Grid.Row>
</Grid>
However, the result is not quite what I want:
How to orginize this card block?
Wouldn't it be better just to use card for that and not grid
<Card>
<Card.Content>
<Card.Header style={{display: 'flex',justify-content: 'space-between', align-items: 'center'}}>
<div>Church Mutual Worker's Compensation Claim</div>
<div>#ID-1234567</div>
</Card.Header>
<Card.Meta style={{display: 'flex',justify-content: 'space-between', align-items: 'center'}}>
<p>
Date Recieved: <span style={{color: 'red'}}>07/20/2018</span>
<span style={{marginLeft: '30px'}}>Account Number: 76543210213</span>
</p>
<Button color="red" size="mini" content="Urgent" />
</Card.Meta>
</Card.Content>
</Card>
After this, you just need to add some style in order to make it look more like you want. Also, I suggest using className instead of inline styles. It is better for rendering and makes your code more readable.
import { Card } from 'antd';
const { Meta } = Card;
ReactDOM.render(
<Card
hoverable
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta
title="Europe Street beat"
description="www.instagram.com"
/>
</Card>
, mountNode);
From AntDesign's example, in the Card's Meta section, is there a way I would be able to add more description to the card like "price" or "author" and display it?
Unfortunately, Meta supports only fixed properties like title and description. https://ant.design/components/card/#Card.Meta
But if you want to add extra fields to the card, you can just add them to the Card html as children:
<Card
hoverable
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta
title="Europe Street beat"
description="www.instagram.com"
/>
<div className="additional">
<p className="price">Price: 20$</p>
<p>Author: John Doe</p>
</div>
</Card>
See Codepen Demo.
it can be done like this
const { Card } = antd;
const { Meta } = Card;
ReactDOM.render(
<Card
hoverable
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta
title="Europe Street beat"
description={[
<div>
<p>"www.instagram.com"</p>
<p> additional content</p>
</div>
]}
/>
<div className="additional">
<p className="price">Price: <span className="quantity">20$</span></p>
<p>Author: <span className="quantity">John Doe</span></p>
</div>
</Card>
, mountNode);
Meta supports only fixed properties like title and description. But If you want to add more details to your Card you can do it with help of description prop which supports by Meta.
You just need to write code as you do in JSX.
<Card hoverable style={{ width: 300, marginTop: 16 }}>
<Meta
description={ //Add your specific data here in description
<>
<div className="subject-card_extra-content">
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" style={{width:20}}/>
<span>Data</span>
</div>
<div className="dashboard-subject_inline-actions">
<Icon type="video-camera" />
<p>
Total Videos :<span> {5} </span>
</p>
</div>
<Button htmlType="submit" icon="play-circle" className="custom-default-fill-btn">
Continue Learning
</Button>
<Button htmlType="submit" icon="play-circle" className="custom-default-fill-btn">
No Progress
</Button>
</>
}
/>
</Card>