How can I achieve the style of the icon to right of the screenshot? <ArrowForwardIosIcon /> gives me the left icon but I would like to output the one to the right.
You can find the code that controls the display of the icons in the dialog that pops up from the icon-search portion of the documentation here: https://github.com/mui/material-ui/blob/v5.11.6/docs/data/material/components/material-icons/SearchIcons.js#L233
Below is an example that applies equivalent styling using the sx prop. The key aspect is setting the color and background-color appropriately in the styling. The rest of the styling just controls the size and shape of the box the icon is in.
import * as React from "react";
import ArrowForwardIosIcon from "#mui/icons-material/ArrowForwardIos";
export default function SvgIconsColor() {
return (
<>
<ArrowForwardIosIcon
sx={{
margin: 0.5,
px: 2,
py: 1,
borderRadius: 1,
boxSizing: "content-box",
color: "primary.main"
}}
/>
<ArrowForwardIosIcon
sx={{
margin: 0.5,
px: 2,
py: 1,
borderRadius: 1,
boxSizing: "content-box",
color: "primary.contrastText",
backgroundColor: "primary.main"
}}
/>
</>
);
}
Related
I have a problem with adding shadow to my View Component.
here is the style object:
header: {
width: '95%',
height: '15%',
marginTop: 50,
alignSelf: 'center',
borderRadius: 20,
justifyContent: 'center',
flexDirection: 'row',
paddingHorizontal: 10,
elevation: 2,
},
and it looks like this :
and as soon as I add these style properties :
borderWidth: 1,
borderColor: 'white',
it looks better but not the best way:
what is my problem? can you help me ?
If you'd like to add a shadow to a <View/> component I would suggest you to use the shadow props. You can add a shadow to a view component by using the style properties like so:
// Just picked some random values for each of the properties.
const styles = StyleSheet.create({
header: {
shadowOffset: {
width: 20,
height: 10
},
shadowOpacity: 0.2,
shadowRadius: 20
},
});
Result of example code
I am not able to replicate the styling you have shown with just the code you have supplied. So I can't give you an answer as to why adding borderWidth and borderColor properties change your shadows. If you'd like me to dive into that, please supply the code of the entire component or even better an Expo snack.
What I did notice is that you used the elevation style property, which is will only add a shadow on Android (source). Additionally this property will also affect the z-order for overlapping views, so I would advise against using this if it is just for shadows.
Expo Snack Demo
BackgroundColor:white fixed the problem, thanks to #Ajay
use backgroundColor:'white' fixed the problem
I'm trying to develop a vue.js component to draw shapes with fabricjs.
After a rectangle been drawn, it is selectable, but can't be resized or rotated with the selection handle, which is not what I was expecting. I think it has something to do with vue.js 3, because everything works with vue.js 2.
In this demo at JSFiddle, corner handles won't work on rectangles, untill after you have selected the rectangle together with other shapes.
<div id="app">
<canvas ref="c"></canvas>
<div>
<button type="button" #click="add('red')">
Add
</button>
Select the blue rectangle. The corner handles are visible but not working.
Now, click "add“, then select both rectangles. Then just select any single item, now the corner handles are working.
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.js"></script>
var vm = Vue.createApp({
data: () => ({
canvas: null
}),
mounted: function() {
var c = this.$refs.c
this.canvas = new fabric.Canvas(c, {
width: c.clientWidth,
height: c.clientHeight
});
this.add('blue')
},
methods: {
add(color) {
this.canvas.add(new fabric.Rect({
top: 20,
left: 20,
width: 40,
height: 40,
fill: color
}))
}
}
}).mount('#app');
// Select the blue rectangle. The corner handles are visible but not working.
// Now, click "add", then select both rectangles.
// Then just select any single item, now the corner handles are working.
How do I work around this while sticking to vue.js 3?
Fabricjs does not like having the canvas converted to a proxy. One way to get around it is to use a global variable instead of using the data. You can also just remove canvas from the data() declaration, which will make it still accessible throughout the template and code, but not make it reactive.
Example:
var vm = Vue.createApp({
mounted: function() {
var c = this.$refs.c
this.canvas = new fabric.Canvas(c, {
width: c.clientWidth,
height: c.clientHeight
});
this.add('blue')
},
methods: {
add(color) {
this.canvas.add(new fabric.Rect({
top: 20,
left: 20,
width: 40,
height: 40,
fill: color
}))
}
}
}).mount('#app');
<div id="app">
<canvas ref="c"></canvas>
<div>
<button type="button" #click="add('red')">
Add
</button>
Select the blue rectangle. The corner handles are visible but not working.
Now, click "add“, then select both rectangles. Then just select any single item, now the corner handles are working.
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.prod.js"></script>
You can use toRaw(). The function can change proxy object to common object.
add(color) {
toRaw(this.canvas).add(new fabric.Rect({
top: 20,
left: 20,
width: 40,
height: 40,
fill: color
}))
}
I was trying to customize jitsi-meet. Here toolbar contains video mute, audio mute, and other buttons. How to place the container with blue background in the bottom of the screen?
If I remove height property then this whole thing is placed in the bottom of the screen but in this case I don't get spacing around items in toolbar.
toolbar: {
alignItems: 'flex-start',
flexDirection: 'column',
justifyContent: 'space-around',
marginBottom: 10,
paddingHorizontal: 5,
backgroundColor: 'dodgerblue',
height: '70%',
},
If I put height:'100%' it takes whole screen. Other elements are commented here. This screen in stacked top of a camera screen.
toolbar: {
flexDirection: 'row',
justifyContent: 'space-evenly',
marginBottom: 10,
paddingVertical: 5,
width:'100%',
backgroundColor: 'dodgerblue',
}
if you want to align the content in a horizontal row then you should give the flexDirection='row'. In react native default flexDirection is column so there is no need to mention it explicitly.
It's hard to understand without posting what you're fully rendering, but it seems like you need to wrap the toolbar view in a parent view, and fix the parent view to start at the bottom of the page through justifyContent: 'flex-end'
<View style={{justifyContent:'flex-end', flex:1}}>
<View style={{styles.toolbar}}>
</View>
</View>
Alternatively, you could set the parent view to flexDirection: 'column-reverse'.
Is there way to customize padding / position... of the burger button.
In the doc, i just can find the drawerImage parameter to override the burger image...
Saddly no option without forking. You can check the code here:
https://github.com/aksonov/react-native-router-flux/blob/master/src/NavBar.js. Padding and position is fixed.
Actually there's a parameter for it : leftButtonStyle
in my case I use react-native-vector-icons getImageSource for the burger icon
componentWillMount() {
Promise.all([Icon.getImageSource('bars', 16, 'black')])
.then((values) => {
this.setState({
menuIcon: values[0],
});
});
}
then you do something like this:
const menuIcon = {
uri: this.state.menuIcon.uri,
height: 20,
width: 20,
resizeMode: 'stretch',
color: 'white',
};
then in your tabs scene
<Scene
key="main"
type="replace"
initial
drawerImage={menuIcon}
tabs
style={{ backgroundColor: theme.navColor, justifyContent: 'center' }}
>
So I have a horizontal scrollview at the top of the view. The ScrollView contains nodes that have a specified width. I then have a border on the bottom of the ScrollView, like you can see in this screen cap: http://i.imgur.com/pOV1JFP.png
As you can see the child nodes of the ScrollView at the top don't reach the border. However, if I change the ScrollView to a View with flexDirection: 'row', then the child nodes fill the height fine. I've tried changing a few properties on the scrollview, such as:
Setting padding:0 on contentContainerStyle
automaticallyAdjustContentInsets={false}
Changing the values of contentInsets directly
None of those seem to fix the issue.
The scrollview code & style:
var styles = StyleSheet.create({
nav: {
padding: 0,
marginTop: 30,
flex: 1,
borderBottomWidth: 1,
borderColor: '#000000'
}
});
<ScrollView
style={[{width: screen.width}, styles.nav]}
horizontal={true}
showsHorizontalScrollIndicator={true}
automaticallyAdjustContentInsets={false}>
{dayNavItems}
</ScrollView>
The child components (makes up dayNavItems)
const styles = StyleSheet.create({
container: {
paddingLeft: 15,
paddingRight: 15,
width: 50,
justifyContent: 'center'
},
odd: {
backgroundColor: '#ccc'
},
selected: {
backgroundColor: '#39b54a'
},
text: {
fontFamily: 'Optima'
}
});
class DayNavItem extends React.Component {
static propTypes = {
day: React.PropTypes.object.isRequired,
odd: React.PropTypes.bool,
selectDay: React.PropTypes.func.isRequired,
selected: React.PropTypes.bool
};
render() {
const d = new Date(this.props.day.created_at);
const viewStyles = [styles.container];
if (this.props.selected) {
viewStyles.push(styles.selected);
} else if (this.props.odd) {
viewStyles.push(styles.odd);
}
return (
<TouchableOpacity style={viewStyles} onPress={() => this.props.selectDay(this.props.day.uuid)}>
<View>
<Text style={styles.text}>{getMonth(d)}</Text>
<Text style={styles.text}>{d.getDate()}</Text>
</View>
</TouchableOpacity>
);
}
}
Adding contentContainerStyle={{flexGrow: 1}} will do the trick.
<ScrollView contentContainerStyle={{flexGrow: 1}}>
</ScrollView>
There is a property called contentContainerStyle for ScrollView. I just solved a similar issue where I set flex: 1 to the ScrollView's styles, ScrollView's contentContainerStyle, and the child View component.
The other answers are correct, but just to provide a clarifying example:
<ScrollView contentContainerStyle={{ flex: 1 }}>
{children}
</ScrollView>
Setting flex: 1 for ScrollView's contentContainerStyle property did the trick for me.
I always end up creating this component in all my projects:
import * as React from 'react'
import { ScrollView, ScrollViewProps, StyleSheet } from 'react-native'
export function FullHeightScrollView(
props: {
children: React.ReactNode
} & Omit<ScrollViewProps, 'contentContainerStyle'>
) {
return (
<ScrollView contentContainerStyle={styles.grow} {...props}>
{props.children}
</ScrollView>
)
}
const styles = StyleSheet.create({
grow: { flexGrow: 1 },
})
Use it in place of React Native's ScrollView.
If ScrollView is wrapped inside of a SafeAreaView, put flex: 1 on SafeAreaView, this did the trick for me after hours of debugging...
Parent:
Child (styles ScrollView I implemented has nothing to do with the current issue you reported):
I have made a simple package for those who just want, like me, a working out of the box ScrollView, without having to apply all the time the styles to make it work properly.
https://github.com/SrBrahma/pagescrollview
Usage:
import { PageScrollView } from 'pagescrollview';
<PageScrollView>
{/** Your contents */}
</PageScrollView>