Using this example: https://ant.design/components/layout/#components-layout-demo-side
How can I add a custom image or icon instead of the default icons.
I tried:
<Menu.Item to="/" key="2">
<img className="ant-menu-item" src={require('image.png')} />
<span>Shopify</span>
<Link to="/shopify">Home</Link>
</Menu.Item>
But that does not look good or does not respect the collapsed behaviour
I tried several different ways of creating custom icons, and the one that was easiest and worked best was to use the component property of the antd Icon component. Just give it a functional component that returns whatever image you want to use:
<Icon component={() => (<img src="/image.svg" />)} />
This seems to work well within menu items and submenus, except that the icons don't line up perfectly with the menu text like the built-in icons do. I ended up adding transform: translateY(-3px) to the CSS to compensate for this (might depend on the image you use).
On the other hand, the official solution (for SVG images only) is to use the #svgr/webpack plugin to turn the SVG file into a component. This may have some advantages as far as layout and coloring (antd icons seem to prefer actual <svg> elements over <img> elements with SVG image files). But I'm not sure because I didn't go to the trouble of setting it up.
<Menu.Item to="/" key="2">
<img className="ant-menu-item" src=="{{ "image.png" | asset_url }}"/>
<span>Shopify</span>
<Link to="/shopify">Home</Link>
</Menu.Item>
I hope this might be work.
you need handle separate css file and put it this code
.ant-menu-item{background-image: url("theme5.jpg");}
icon:<img src="/static/icons/BH_tainan.svg" height={20} style={{margin:"0 12px 0 0" ,paddingTop:10 ,float:"left"}}/>,
need float:"left" in your style
A bit of an old question, but I thought I'd post another solution here for those not wanting to go the webpack route like the docs recommend. You can simply create your own SVG component and then pass it to the antd icon component.
Something like this
// Icons.tsx
export const MyIcon = () => {
return (
<svg>
// svg path data
</svg>
);
};
Then
// app.tsx
import Icon from "#ant-design/icons";
import { MyIcon } from "./Icons";
const App = () => {
return (
<Icon component={MyIcon} />
)
}
I fiddled with this a little bit in a sandbox, and it seems to work just fine. I was using antd 4.23.3 for reference. Didn't test it a huge amount so there might be some style adjusting needed, not sure.
Related
I am using the version 5.12.1 and suddenly applying style to the component like this...
<section className="container-center">
<FontAwesomeIcon icon="arrow-down" style={{ color: "var(--themeP)", style={{ fontSize: "1.5rem" }} }} />
</section>
...is no longer working.
I am using this in another project with the exactly same version and that is working fine. I noticed that is applied automatically a fa-w-14 className but this class is not actually being applied and making the icons being displayed very huge without style.
The only solution I came across was transform: scale(x) when x is the value of size. But that is not what I want since it takes all the space where it meant to be filled in the original size.
I tried insert the prop size from docs without any result, too.
My package.json related font-awesome modules are like these:
"#fortawesome/fontawesome-svg-core": "^1.2.27",
"#fortawesome/free-solid-svg-icons": "^5.12.1",
"#fortawesome/react-fontawesome": "^0.1.9"
Only using the solid icon.
If someone can shed some light on this, I`d appreciate the support.
The solution was mind-bendingly simple by just changing fontSize to width instead. I double-checked my workable fontawesome icons project and I used to declare fontSize.
Why isn't styling inside the Image component in NextJS not allowing me to manipulate my image.
Am I missing something?
<Image className={styles.bg}
style={{ transform: `translateY(${offset * 0.5}px)` }}
src="/../public/bg.jpg"
// width={2049}
// height={2049}
// objectFit="cover"
layout="fill"
quality={100}
/>
If Next.js version is less than 12.1.1, this will not work. Onwards there is support for canonical style prop. With the style prop in support for props like layout, objectFit, and objectPosition is removed in Next.js 13.
Other properties on the component will be passed to the underlying img element with the exception of the following:
style. Use className instead.
NextJs v12.1.1 added the style prop to next/image.
next 12 does not support styling the image tag directly, but the way to go about this is to put the image tag inside a div container, which we will apply the styling to, here is a sample
<div className={style.styling}>
<Image src={image.url} width={100} height={100} />
</div>
I am working on a web app, and I am trying to make it responsive, but I am running into a few problems. I am using media queries to detect if the screen width is > than a certain amount or < than a certain amount. Based on that, I would want to change the layout of my component, so that it does not cram and move everything out of alignment. However, it seems like if my goal is to reorder the child components within my component using conditional rendering based on the media query result, then my code would be repeated multiple times. Hence, I am checking to see if there are any other ways to accomplish this.
Below is a screenshot of the browser when the screen size gets smaller, the contents get too cramped up, and hence it messes up the alignment.
Below is a snippet of my code (this code represents the right side of the image -> Revenue and Revenue KPI)
<Row justify="space-around">
<Col span={11}>
<Statistic
title="Revenue"
value={data[metric].revenue}
valueStyle={{ color: '#3f8600' }}
/>
</Col>
<Divider type="vertical" />
<Col span={11}>
Revenue KPI
<Button shape='circle' size='small' onClick={() => handleClick('rev', metric, 'post')} style={{ marginLeft: '5%' }}>
<PlusOutlined />
</Button>
<Statistic
value={data[metric].rev_kpi}
valueStyle={{ color: '#3f8600' }}
/>
</Col>
</Row>
What I would want to do, is to change the grid layout once the screen width is smaller than a certain amount, and instead of the components above being in the same Row, I would want each to be in their Row (stacking on top of each other). However, if I were to do this using conditional rendering, it seems like I would have to repeat the code quite a fair bit, which seems tedious and messy. Hence, I am hoping if there are any more efficient methods to achieve what I would want to make.
The UI package I am using is AntD (where I got the components for Row, Col, Statistic, Button)
https://ant.design/components/grid/
this is my media query function (I use this function to return a boolean based on the query I pass in)
import { useEffect, useState } from "react";
function useMediaQuery(
query,
defaultMatches = window.matchMedia(query).matches
) {
const [matches, setMatches] = useState(defaultMatches);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) setMatches(media.matches);
const listener = () => setMatches(media.matches);
media.addListener(listener);
return () => media.removeListener(listener);
}, [query, matches]);
return matches;
}
export default useMediaQuery;
All help is appreciated, thanks all! Do guide me along as I am new to React and especially new to implementing responsive websites!
Since Row and Col in ant design seems to be based on flex you should try to use the CSS order property to re-arrange your elements
https://developer.mozilla.org/en-US/docs/Web/CSS/order
It is also available as a prop on the Col component:
https://ant.design/components/grid/#Col
CSS order demo (use media query to change order value for various screen sizes):
div {
display: flex;
flex-direction: column;
}
#reverse:checked ~ div>p:first-child {
order: 2;
}
<input type="checkbox" id="reverse"/>
<label for="reverse">reverse</label>
<div>
<p>First text element in HTML</p>
<p>Second text element in HTML</p>
<div>
For even more complex rearrangement of your elements you could use CSS Grid:
grid-template-areas: give custom names to areas in your grid
grid-area: place element in the grid using one of your custom names
use media-queries to change grid-template-areas and it should work nicely
https://css-tricks.com/snippets/css/complete-guide-grid/
I am having a problem regarding how to set Particle-bg to the whole page in ReactJS. I used lines style and it is working but it fits only for a section. If I add more content on the page Particles-bg doesn't apply to them. I want to set the background to the whole page.
This is the function that I used. <ParticlesBg num={50} type="lines" bg={true}/>
If someone knows how to fix this help me.
Particle-bg automatically applies to the whole background. when you add more components, it goes underneath that component. so you have to use something which has a transparent background.
return (
<div>
<YourComponent/>
<ParticlesBg color="#000000" num={100} type="cobweb" bg={true} />
</div>
);
I am trying to make a custom button component and change the style of the button using props. Below is my code:
class CustomButton extends React.Component {
render() {
return (
<TouchableOpacity
style={{height:this.props.height, borderWidth:1}}>
<Text style={{fontSize:13}}>{this.props.text}</Text>
</TouchableOpacity>
)
}
}
And I call my component like this:
<CustomButton
// custom text using props works fine
text="whatever I want to say"
// But changing custom style won't work.
height='200' or 200
/>
I am able to change the text using props however, when I apply the same to change the height it won't work. How could I change the style using props?
Try using:
<CustomButton
text="whatever you want to say"
height={200}
/>
hope it works
Not enough points to comment, can you try sending
<CustomButton
text="....."
height='200px'
/>
The reason being the style is expecting 200px as height px being one of the key metric.
There are other metrics such as px, em, vw, etc check w3 units for css