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>
Related
I'm using react for a project where I'm using a React-Bootstrap Snipper. but Its very tiny and now I want to change its size now. How can I change it?
<div
style={{ width: "200px", height: "200px" }}
className="w-100 d-flex text-[#DC2626] justify-content-center align-items-center">
{/* bootstrap spinner */}
<Spinner animation="border" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
</div>
You can pass the width and height to the spinner component.
codesandbox link - https://codesandbox.io/s/broken-surf-vids1x?file=/src/App.js
<Spinner animation="border" role="status" style={{ width: "4rem", height: "4rem" }}>
<span className="visually-hidden">Loading...</span>
</Spinner>
You can also directly use the size tag to change the size
<Spinner animation='border' size='sm' className='mr-2' />
xs (extra small), sm (small), md (medium), lg (large), and xl (extra large)
<Parallax pages={2} ref={ref}>
<ParallaxLayer offset={0} speed={1} factor={2}>
<Snowfall snowflakeCount={35} color={'#53bdfc'} />
<section className='hero-section'>
<div className='container'>
<div
className='hero-main'
style={{ backgroundImage: `url(${background})` }}
>
<div className='hero-text'>
<motion.h1
>
Community{' '}
<motion.span
>
First
</motion.span>
</motion.h1>
<motion.p
>
Text
</motion.p>
</div>
<motion.img
src={HeroImage}
alt='hero_image'
/>
</div>
</div>
<Footer />
</section>
</ParallaxLayer>
<ParallaxLayer
offset={0}
speed={1}
style={{
backgroundImage: `url(${SeaBackground})`,
backgroundSize: 'cover',
zIndex: -2,
}}
/>
</Parallax>
This is in my App.js.
The thing is, if I change something from the code and not hit refresh, the parallax is working. But if I refresh, then it stops working.
Is this some kind of mounting issue? Any help would be greatly appreciated!
I also faced the same issue today and I downgraded react version 18 to 17.0.2 everything works fine so far.
I'm trying to create a swipeableDrawer like that.
I want a button on my swipeableDrawer which I could click to dispatch an action.
But I can't click the button and swipe the swipeable drawer at the same time.
I want it.
<Global styles={{
'#swipeable .MuiPaper-root': {
height: `calc(78% - ${drawerBleeding}px)`,
overflow: 'visible',
},
}}/>
<SwipeableDrawer
id={'swipeable'}
anchor="bottom"
open={open}
onClose={toggleDrawer(false)}
onOpen={toggleDrawer(true)}
swipeAreaWidth={100}
disableSwipeToOpen={false}
ModalProps={{
keepMounted: true,
}}>
<>
<Card>
<CardContent>
<div className="row">
<div className="col-12">
{!ricalcolaPremioBTNEnabled ?
<Button className={buttonClasses.root}
onClick={() => history.push(INFO_PERSONALI_PATH)}>CONTINUA</Button> :
<Button className={buttonClasses.root}
disabled={!ricalcolaPremioBTNEnabled}
onClick={handleRicalcolaPremio}>RICALCOLA</Button>}
</div>
</div>
</CardContent>
</Card>
</>
<div style={{height: '100%', marginTop: '3vw', overflowY: 'auto', overflowX: 'hidden'}}>
<div className="row p-3">
Content of swipeable drawer
</div>
</div>
</SwipeableDrawer>
</Global>
How can I fix it?
Your button just probably inherits the pointer-events: none CSS from the <SwipeableDrawer/>.
You can override this CSS but you may encounter this issue
I need to add link to my logo image.I mean when ever I click my logo image it should redirect to dashboard page.I tried to do it using anchor tag but it is not working properly
<Header className='header' style={{ position: 'fixed', width: '100%' }}>
<div className='header-logo' style={{ width: collapsed ? 80 : 200, height: 0 }}>
{collapsed &&
<a href="/dashboard">
<img src={minLogo} alt='Logo' />
</a>
}
{ !collapsed &&
<span> </span>
}
</div>
<Icon
className="trigger"
type={collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggleSideBar}
/>
<div style={{ display: 'inline-block', float: 'right' }}>
<Dropdown overlay={menu} placement="bottomRight">
<Avatar icon='user' />
</Dropdown>
</div>
</Header>
Try this
import { Link } from "react-router-dom";
<Link to="/dashboard">
<img src={minLogo} alt='Logo' />
</Link>
User router Link instead of anchor:
<Link to="/dashboard">
<img src={minLogo} alt='Logo' />
</Link>
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>