I'm using material ui icons, here i have camera icon which has another icon connected to it(AddIcon), i want to have icon for each letter in alphabet but material ui doesnt have it, so i found 'materialdesignicons' which has alphabets.
My question is how to replace that plus (addicon), for example with 'b' alphabet of 'materialdesignicons' ?
my code:
codesandbox: https://codesandbox.io/s/svgiconssize-demo-material-ui-forked-yfs77g?file=/index.tsx:73-134
code:
import * as React from "react";
import Box from "#mui/material/Box";
import Container from "#mui/material/Container";
import AddIcon from "#mui/icons-material/Add";
import CameraAltOutlinedIcon from "#mui/icons-material/CameraAltOutlined";
export default function SvgIconsSize() {
return (
<Container sx={{ background: "black", height: "100vh" }}>
<Box // This is your container
sx={{
position: "relative",
display: "initial",
color: "black", // camera icon takes the fill color from here
width: "50px",
height: "50px"
}}
>
<CameraAltOutlinedIcon sx={{ fontSize: 40, color: "white" }} />
<AddIcon // This acts like a frame for the plus icon for a good looking result
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
fontSize: 22,
strokeWidth: "4",
stroke: "white"
}}
/>
<AddIcon // This is plus icon
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
color: "black", // plus icon takes the fill color from here
fontSize: 22
}}
/>
</Box>
{/* UNTIL HERE */}
</Container>
);
}
this is what i want to use: import { mdiAlphaB } from '#mdi/js';
so i checked tutorial : https://dev.materialdesignicons.com/getting-started/react
but i would just get rotating 'b'
it should look like this
but instead of plus, there should be 'b'
Any suggestions ?
You have to first install material design icons by running command
npm install #mdi/react #mdi/js
after that import like so
import Icon from '#mdi/react'
import { mdiAlphaB } from "#mdi/js"; // The icon to use
and then replace this
<AddIcon // This is plus icon
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
color: "black", // plus icon takes the fill color from here
fontSize: 22
}}
/>
with
<Icon //B icon
path={mdiAlphaB}
title="User Profile"
size={2}
color="white"
style={{
position: "absolute",
left: "15px",
top: "-10px"
}}
/>
)
and at the end tweak position property a bit if needed. And voila! you are done. link to codesandbox
Related
I created a table consisting of a CircularProgressBar, when I hover the tr the CircularProgressBar's background color must change into dark blue from orange,
but I it does not change. Additionally, when the tableRow hoveres the progressBar hides and just the percentage number remain.
just material ui#5 is used
I tried to change the color by this code .MuiTableRow-root ProgressCircular
sample source :
https://stackblitz.com/edit/react-jgj8dh?file=package.json,src%2Findex.js
after hover
<Box sx={{position: 'relative', zIndex: 999, display: 'inline-flex', borderRadius: "100%", ":hover CircularProgress": {backgroundColor: primary.darkBlue} }}>
<CircularProgress thickness={2} variant="determinate" {...props}
sx={{color: "primary.white", borderRadius: "100%", padding: "1px", backgroundColor: primary.darkBlue,
"& .MuiCircularProgress-root:hover CircularProgress ": {
backgroundColor: `${primary.darkBlue} !important`,
zIndex: 999999
},
}} />
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
zIndex: 2,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: "100%",
padding: "2px"
}}
>
<Typography variant="caption" component="div" color="primary.white">
{`${Math.round(props.value)}%`}
</Typography>
</Box>
</Box>
Does this code help you?
I am trying to stop some behaviour based on a condition if a mouse is hovering over a particular react component in my app.
I can only find old answers referencing jQuery and JS vanilla. Is there another way to do this? Or is it not acceptable?
Here is the component I interested in determining if the mouse is over:
<ContentRightHandSide offset={bannerHidden ? 80 : 120}>
<ContentTitle>
Activity
<img
style={{
display: "inline",
position: "relative",
marginLeft: "20px",
width: "35px",
}}
src={calendarIcon}
/>
</ContentTitle>
{authStatus === "authenticated" ? (
<ShareLogs
linkShareLogs={activeShareLogs}
isBannerHidden={bannerHidden}
hovered={hoveredNode}
selected={selectedNode}
/>
) : (
<div style={{ position: "relative" }}>
<img
src={blurredScreenLinks}
style={{
fontSize: "24px",
position: "relative",
margin: "0 auto",
width: "100%",
}}
/>
<button
style={{
backgroundColor: "#F7F1FF",
color: "#35373B",
position: "absolute",
fontFamily: "lato",
left: "0",
right: "0",
marginLeft: "auto",
marginRight: "auto",
width: "320px",
top: "100px",
padding: "0px 20px",
display: "flex",
alignItems: "center",
borderRadius: "60px",
}}
onClick={handleSignInClick}
>
<img
style={{
display: "inline",
position: "relative",
width: "80px",
cursor: "pointer",
margin: "-5px",
}}
src={slackIcon}
/>
<span style={{ textAlign: "left" }}>
Lorem Ipsum
</span>
</button>
</div>
)}
</ContentRightHandSide>
You can define hover events like this in React, similar to how you would handle onClick.
<Component
onMouseEnter={handleSomething}
onMouseLeave={handleSomething}
/>
There are a few ways you can determine if the mouse is currently over a React component, but how to "stop some behavior" depends on how your behavior runs.
If you can make your behavior dependent on some state variable, you can give the React component a handler that sets the state on onmouseenter and onmouseleave events:
const [isMouseOver, setIsMouseOver] = useState(false)
...
<ContentRightHandSide
onMouseEnter={() => setIsMouseOver(true)}
onMouseLeave={() => setIsMouseOver(false)}
offset={bannerHidden ? 80 : 120}
>
...
</ContentRightHandSide>
The handler you give to the component doesn't need to set a state variable either, it can perform whatever logic is needed to change your behavior.
This JSFiddle demonstrates that behavior in a class-based component.
The events you might be interested in: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
There is a section about handling events in the official React docs that might give you more ideas.
I'm using material ui icons, is there any way to add plus to icons ?
This is my icon :
import ApartmentIcon from '#mui/icons-material/Apartment';
and that icon should have plus to it like here:
I have been trying to find a way but did not find anything,
these are icons i want plus to them:' CameraAlt,
Apartment,
Web,
Assessment,
Description,', any suggestions ?
Using sx property here is what you need.
<Box sx={{ background: "black" }}>
<Box sx={{ position: "relative", display: "inline", color: "white" }}>
<CameraAltOutlinedIcon sx={{ fontSize: 40 }} />
<AddIcon
sx={{
position: "absolute",
right: "-5px",
bottom: "2px",
color: "black",
fontSize: 22,
strokeWidth: "6",
stroke: "black"
}}
/>
<AddIcon
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
color: "white",
fontSize: 22
}}
/>
</Box>
</Box>
I had to use two 'plus' svg AddIcons one inside the other with some stroke to the one on the back to act like a frame for the one on the front and have a better looking result.
The only thing you need to do is adjust the left/right attributes depending the main icon you are using and the colors to match your background.
Here also is a working codepen
i think this is the icon you are looking for
import AddAPhotoIcon from '#mui/icons-material/AddAPhoto';
Here is a solution using styled components:
import * as React from "react";
import { Box } from "#material-ui/core/";
import { CameraAlt } from "#material-ui/icons";
import AddIcon from "#material-ui/icons/Add";
import styled from "styled-components";
const IconContainer = styled(Box)`
background-color: red;
position: absolute;
`;
const PlusIconBack = styled(AddIcon)`
position: absolute;
right: -8px;
bottom: -1px;
color: black;
font-size: 21px;
stroke-width: 3;
stroke: black;
`;
const PlusIconFront = styled(AddIcon)`
position: absolute;
right: -7px;
bottom: 0;
color: white;
font-size: 19px;
`;
function Demo() {
return (
<IconContainer>
<CameraAlt />
<PlusIconBack />
<PlusIconFront />
</IconContainer>
);
}
export default Demo;
The point of it, is to use a container giving it position relative, add your main icon, then add your plus icons with position absolute and place them where you want using left/right top/bottom.
Sandbox: sandbox
I have some nested components: TEXT and an Image.
I would like the button in the blue box to move to the right in the black box (parent).
marginRight: 0 and marginEnd: 0 arent working. How can I accomplish this?
What is currently Happening.
What I want.
<View style={styles.profileButton}>
<Text style={{fontSize: 20}}>Tap to add a profile!</Text>
<TouchableOpacity>
<View style={styles.TouchableOpacity}>
<Image
style={styles.addprofilebutton}
source={require('../assets/addProfileButtonTeal.png')}>
</Image>
</View>
</TouchableOpacity>
</View>
StyleSheet
profileButton: {
zIndex:5,
flex: 1,
position: 'absolute',
bottom: '10%',
right: '3%',
justifyContent: 'flex-end'
},
TouchableOpacity: {
marginEnd: 0,
},
addprofilebutton: {
width: 100,
height: 100,
marginRight: 0
}
TouchableOpacity: {
alignItems:'flex-end'
}
or
TouchableOpacity: {
alignSelf:'flex-end'
}
I'm having a lot of trouble getting two child components to vertically and horizontally align 'on top' of their parent element in React Native.
I am trying to place Loader and Button on top of RTCView.
I currently have this JSX returning in the parent:
if (localStream) {
return (
<View style={styles.videoViewWrapper}>
<RTCView style={styles.android} streamURL={localStream.toURL()} />
<View
style={{ justifyContent: 'center', position: 'absolute', }}
>
<Loader
title={callDetails}
>
</Loader>
<Button
mode="contained"
style={{ width: 150, margin: 100 }}
onPress={handleCancelCall}>
Cancel
</Button>
</View>
</View>
);
}
And this inside Loader:
Loader = props => {
return (
<>
<StatusBar
hidden
/>
<View style={{
flex: 1,
alignItems: 'center',
}}>
<Text
style={styles.text}
>
{props.title}
</Text>
<ProgressBar color={Colors.green800} indeterminate={true} style={{ width: 100, height: 1 }} />
</View>
</>
)
}
const styles = StyleSheet.create({
text: {
fontFamily: "Quicksand-Light",
fontSize: 22,
textAlign: "center",
color: "#333333",
marginBottom: 25,
justifyContent: 'center',
}
});
Whilst I have achieved getting Loader to display 'on top' of it's parent, I cannot move them to their position at the top of the screen.
Any help would be much appreciated!
Your absolute positioned View needs to cover its parent. You can achieve this by adding top: 0, left: 0, right: 0, bottom: 0 to its style
You may need to edit your Button style. I removed it from your code, add it if you need margin or a specific width.
<View style={{ justifyContent: 'center', alignItems: 'center', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
<Loader title={callDetails} />
<Button mode="contained" onPress={handleCancelCall}>Cancel</Button>
</View>