I want to create an arrow as shown in the below image
I got it using svg -
<svg height='24' width='12' style={{ marginBottom: '-4px', marginLeft: '49%' }}>
<line x1='6' y1='0' x2='6' y2='28' style={{ stroke: '#D0D0D7', strokeWidth: 2 }} />
<polyline points='0,14 6,8 12,14' style={{ fill: 'none', stroke: '#D0D0D7', strokeWidth: 2 }} />
</svg>
But I want to use material ui icon and there is no material ui icon where the upward arrow head is at the middle of the line.
The following are available in material ui
- arrow without a line
- arrow head at top of the line
Is there a way of using the KeyboardArrowUp icon from option 1 and put it at the middle of a line? or any other way to achieve what I want?
i guess it clear in the doc .. https://material-ui.com/components/icons/
but either way you can use SvgIcon or the normal icon
function HomeIcon(props) => (<SvgIcon {...props}><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></SvgIcon>);
or use
<Icon color="primary">add_circle</Icon>
Related
I use button in react-native-paper with icon. I need to add a shadow style only to the icon of the button. The only available option I found was to add an elevation to the button. But it is applied to the whole button instead of applying only to the icon of the button.
The code of button:
<Button
icon={icon}
onPress={onPress}
size={size}
color={color}
animated={animated}
disabled={disabled}
style={styles.btnStyles}
/>
The Style of button to add shadow:
btnStyles: {
elevation: 40,
shadowColor: '#000',
backgroundColor: 'rgba(0,0,0,0)',
},
The result:
enter image description here
(Here you can see that the shadow is applied to the button, not to the icon inside.)
How can I solve above issue and add a shadow only to the icon?
Thanks in advance.
I'm using framer-motion to animate an Icon component when hovered as follow :
<Icon
initial={{ scale: 1, color: "#B9BBBE" }}
whileHover={{
scale: 1.15,
color: "#FFCC4D",
}}
transition={{ type: "spring", stiffness: 500 }}
>
<Emoji />
</Icon>
The Icon contains a simple SVG Emoji with a grey color #B9BBBE, and I also use this color in the initial prop.
I need the transition to go from that to the yellow #FFCC4D, but when I move out of the icon, it transitions back from the yellow to a shade of blue and then the initial grey color.
I can't figure out how to transition from yellow directly to the grey, without any weird colors in between.
I also tried to pass an array as follow, but still got the same result :
whileHover={{
scale: 1.15,
color: ["#B9BBBE", "#FFCC4D"],
}}
I guess stiffness creates this color "bounce":
A spring’s Stiffness determines the spring's velocity and how many times the spring will bounce before the spring settles and the animation ends.
So you need apply spring and stiffness only for scale property for bounce effect, and leave color as is:
<motion.div
style={{ height: 100, width: 100 }}
initial={{ scale: 1, backgroundColor: '#B9BBBE' }}
whileHover={{
scale: 1.15,
backgroundColor: '#FFCC4D'
}}
transition={{ scale: { type: 'spring', stiffness: 500 } }}
></motion.div>
Codesandbox
I have something like this:
These are two different breakpoints. When container is stretched by form, map fills its container, but when flex changes direction to row it does not. How do I fix this without giving fixed value for map height?
I am using Chakra UI lib but it does not really matter, pure css solution is also fine.
<Stack mt="2" direction={{ base: 'column', md: 'row' }}>
<Box
flex={{ md: 1, sm: 1, lg: 2 }}
bg="white"
p="2"
shadow="sm"
borderRadius="4"
>
<CreateDeviceMap
zoom={10}
style={{ height: '100%' }}
center={[51.472829664858644, -0.06935119628906251]}
/>
</Box>
<Stack
flex="1"
bg="white"
shadow="sm"
p="4"
spacing="2"
borderRadius="4"
>
... form
</Stack>
</Stack>
UPDATE:
If I put height:100vh to container map shows and it is fine on small breakpoint but it destroys bigger breakpoints, they become streched. So I just need to find sweet spot between them.
I'm making an React Native App in which i have 2 buttons/ TouchableOpacity's. When styling these buttons, they both get double border even when explicitly stating 'solid' borderstyle in the respective stylesheets. ( On the attached screenshot the middle button is all white, but when I make the border a different color it is a double one as well ). No where in the whole file have I defined a double borderstyle.
bottom left button stylesheet:
roomsbutton: {
alignItems: 'center',
backgroundColor: '#009DDC',
padding: 5,
borderRadius: 2,
borderWidth: 1,
borderStyle: "solid",
borderColor: 'white',
color: 'white',
}
and its parent view:
<View style={styles.bottom}>
<TouchableOpacity
style={styles.roomsbutton}
onPress={() => Alert.alert('more rooms')}
>
<Text style={styles.roomsbutton} >FIND MORE FREE ROOMS</Text>
</TouchableOpacity>
</View>
You are passing the styles to the <TouchableOpacity> and the <Text> components. So they are both surrounded by the border
You pass style={styles.roomsbutton} to both the TouchableOpacity and the Text components. Each have a solid white border
this is happining because you apply className .roomsbutton two times in a button. once in TouchableOpacity and once in Text.
just remove style={styles.roomsbutton} form Text like below..
<Text>FIND MORE FREE ROOMS</Text>
I am using Picker and it has two lines one on top and one under the selection screen. I can't remove it or set it to transparent. I believe the border is for the Picker.Item and not the overall Picker, but I am not sure.
borderWidth, BaackgroundColor none will work.
<Picker style={width:'50%', padding: 20, height: 100} itemStyle={height:100}}
<Picker.item label="one" value="one" />
</Picker>