I used card component from ant ui, I changed the color of the background and text color in it, but the divider color inside the card is not changing, is there a way to change the color of the divider inside the card component?
here is the code for card
<div>
<Card
title={
<Title level={5} style={{ color: 'white' }}>
Avi-Todo - 1
</Title>}
bordered={false}
style={{ width: 600, margin: '10px 0px', background: '#292929', color: 'white' }}
extra={<Title level={5} style={{ color: 'white' }}>16-April-22 10:25 AM</Title>}>
<p>{this.props.ptodo}</p>
</Card>
</div>
here is how it looks
How to change the divider color inside that card component?
Create a css file and add the following
.ant-card-head {
border-bottom: 1px solid #f41d1d;
}
Related
I'm trying to create a white, circular shadow in IOS, but ONLY the shadow. When placing shadow props on a View no backgroundColor or transparent backgroundColor the shadow will pass to the first child element with dimensions. Is it possible to utilize IOS shadow props to create a nice circular glow effect?
This is what I'm looking for:
This was done using react-native-shadow, but is for Android only. Hoping to achieve a similar effect with IOS shadow props.
Currently on IOS I have this:
there really is a shadow, but it's very faint
Here's what I'm doing on the IOS side right now:
<View style={[styles.iconAndTextContainer, styles.iosIconShadow]}>
// shadow is placed on this icon element which has a height and width
{icon}
<ThemedText color={iconColor}>{label}</ThemedText>
</View>
const styles = StyleSheet.create({
iconAndTextContainer: {
alignItems: 'center',
width: '100%',
height: '100%',
justifyContent: 'center',
},
iosIconShadow: {
shadowColor: '#fff',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 1,
shadowRadius: 10,
},
});
ideally I'd like to do this:
<View style={styles.iconAndTextContainer}>
// have an absolute positioned View right in the middle that is transparent, but creates a white shadow to create that 'glow' effect
<View style={[styles.iosIconShadow, {position: 'absolute'}]} />
{icon}
<ThemedText color={iconColor}>{label}</ThemedText>
</View>
I've been looking but can't locate the key reference that enables me to update the Inputs pre/post tab.
<Input
addonAfter=".com" // <-- I want to change this bg color
defaultValue="100"
style={{
width: '110px',
backgroundColorAddonAfter: 'red' //HERE, whats the key name?
}}
/>;
The pre/post tabs are the 'greyish' areas that http: and .com in them. I want to change those colors.
There are two ways to achieve this:
Override CSS class
You can override all post and pre tabs colors.
/* import ./App.css */
/* first and last are red */
.ant-input-group-addon {
background-color: red;
}
.ant-input-group-addon:first-child {
background-color: purple;
}
.ant-input-group-addon:last-child {
background-color: blue;
}
Style your own component with Input.Group
Here we use Input.Group which groups components as done with addonBefore and addonAfter, you need to make your own PreComponent and PostComponent :
<Input.Group compact>
<PreComponent color="pink">{'http://'}<PreComponent/>
<Input style={{ width: '30%' }} defaultValue="my site" />
<PostComponent color="red">.com<PostComponent/>
</Input.Group>;
Check the demo to grasp what needs to be done:
I am struggling to make back navigation arrow on shoutem/ui NavigationBar work on iOS. The navigation bar looks like this and works on Android as expected (tap on the arrow navigates to specific predefined view) :
The related layout is as follows :
import {
Text,
Button,
View,
Image,
Divider,
Spinner,
NavigationBar,
Caption
} from '#shoutem/ui';
render() {
const {navigate} = this.props.navigation;
if (this.state.submitted && this.props.loading) {
return (
<Spinner style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}} />
);
}
return (
<Container style={{ flex: 1, backgroundColor: '#ffffff' }}>
<Content>
<NavigationBar
styleName='no-border'
hasHistory
navigateBack={() => navigate('WelcomeScreen')}
/>
<Grid>
<Row style={{ height: 100, justifyContent: 'center', alignItems: 'center', paddingTop: 100 }}>
<Image
style={{ width: 96, height: 89 }}
source={require('../login-logo.png')}
blurRadius={1} />
</Row>
//some other rows and columns
</Grid>
</Content>
</Container>
);
}
}
On Android the following works as expected. On iOS (Xcode simulator) the navbar is displayed correctly, however tapping on it does nothing. No log events nor errors are generated as well. I assume that the navbar can somehow be overlaid by some other element. However, the same problem exists with the other views with different elements inside the grid below the navbar. Does anyone have experience with this issue? What is the most likely cause and what am I doing wrong?
The "no-border" styleName applied to NavigationBar turned out to be the offending code piece in this case. Replacement with "inline" worked around the issue while introducing a slightly distinguishable border below the NavigationBar. However, this looks like a bug and the following issue has been opened in shoutem/ui GitHub repository : https://github.com/shoutem/ui/issues/398
This is my jsfiddle url. Could you help to find out why the border of legend can not display in this chart. The legend related code was copied from official document site.
Below is my legend component.
<VictoryLegend x={75} y={0}
title="Legend"
centerTitle
orientation="horizontal"
gutter={20}
style={{ border: { stroke: "black" }, title: { fontSize: 20 } }}
data={legendData}
/>
https://jsfiddle.net/xuhang1128/xwy8j4fw/1/
I've been trying to use the property zIndex on a ScrollView but it doesn't seem to be working. When I apply zIndex it looks like this:
As you can see, the ScrollView is being blocked by the input. I want the effect of having the ScrollView completely cover the other input when the suggestions come up, with zIndex. Here's what I have right now:
<View>
<Input
value={this.state.inputValue}
style={styles._input}
inputStyle={styles._text}
onChangeText={this.handleChangeText}
{...this.props}
/>
<View style={styles._spacing}></View>
{predictions.length ?
<ScrollView
style={styles._scroll}
>
{predictions.map(this.renderPrediction)}
</ScrollView>
: null}
</View>
Note that Input is a separate component that renders a specific TextInput. Also, this.renderPrediction returns this:
<Text
style={styles._text}
key={index}
onPress={this.handlePredictionPress.bind(null, prediction.description)}
>
{prediction.description}
</Text>
And finally here are my styles:
const styles = EStyleSheet.create({
input: StyleSheet.flatten([inputStyle]),
text: {
fontSize: 15,
},
spacing: {
height: 10
},
scroll: {
position: "absolute",
zIndex: 10,
width: "80%",
top: 50,
backgroundColor: "white"
}
});
Why isn't my zIndex attempt working and how can I get it to work as desired?
According to your image it looks like the zIndex is working as expected, the ScrollView is over the input. But the white background didn't catch.
Use contentContainerStyle for the background color behind the items.
<ScrollView style={styles._scroll} contentContainerStyle={styles._contentContainer} >
...
contentContainer: {backgroundColor: "white"}