I am using mui lists to create a sidebar.
<List>
<StyledLink to="/">
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon>
<GridView />
</ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItemButton>
</ListItem>
</StyledLink>
</List>
I tried creating a custom Link like below,
import { Link } from "react-router-dom";
const StyledLink = ({ to, style = {}, children }) => (
<Link to={to} style={{ ...style, textDecoration: "none" }}>
{children}
</Link>
);
export default StyledLink;
I also tried this solution.
But still the blue color doesn't go away and it doesn't inherit mui list item text formatting.
text-decoration: "none" is only removing the underline style. You can get rid of the blue color by setting color attribute.
style={{ ...style, textDecoration: "none", color: "inherit" }}
I'd like to have a Drawer that doesn't overlay the page content. So far I have the following code
<ThemeProvider theme={oclockTheme}>
<main>
<Drawer
variant='temporary'
open={showMenu}
hideBackdrop
>
<List>
<ListItem sx={{ justifyContent: 'center' }}>
<img src={oclockLogo} alt="O'Clock logo" />
</ListItem>
</List>
<Divider light />
<List >
<ListItem>
Menu item
</ListItem>
</List>
</Drawer>
<Button onClick={() => setShowMenu(true)} variant="contained" color="primary">Teste</Button>
</main>
</ThemeProvider >
And the problem is that the Drawer overlays my button
And I'd like to push my bottom to the right when the Drawer is opened and pull it back to the left when it's closed...
I've seen a solution in the library docs, but I'd like to know if anyone else can help me doing it with a cleaner/smaller code. I also know that we have the SwipeableDrawer, but I couldn't find a way to change its styles...
Use persistent drawer instead.
I'm showing items in list. I don't want to use horizontal scroll view but how can I wrap items such that they don't fall out of the screen? Just as we have FlowLayout in android.the picture shows the third item in first row is half out of the screen
<List horizontal={true}
scrollEnabled={false}
style={{flexWrap: "wrap"}}
dataArray={articleData.Types}
renderRow={(Type) =>
<ListItem style={{borderBottomWidth: 0}} content>
<Button rounded>
<Text>{Type.Name}</Text>
</Button>
</ListItem>
}>
</List>
Could use Views to achieve this:
<View style={styles.wrapContainer}>
{DATA.map(data => {
return (
<View style={styles.buttonContainer} >
<Button title={data.name}/>
</View>
)})
}
</View>
Working Example
I'm using React Native, I want to remove lines from list but i can't,I set borderBottomWidth to 0 but it didn't work, this is my code:
import React from "react";
import { AppRegistry, Image, ImageBackground, StatusBar, StyleSheet, View,
FlatList } from "react-native";
import { Container, Content, Text, List, ListItem, Icon, Left, Body, Right,
} from "native-base";
const routes = [{"title":"Specials","icon":"menu"}, {"title":
"Home","icon":"home"}, {"title":"Shopping Cart","icon":"cart"},
{"title":"Wishlist","icon":"heart"},{"title":"My
Orders","icon":"menu"},{"title":"Categories","icon":"list"},
{"title":"Gift Vouchers","icon":"menu"},
{"title":"Affiliates","icon":"menu"},{"title":"Returns","icon":"menu"},
{"title":"My Account","icon":"menu"},
{"title":"Settings","icon":"menu"}, {"title":"Contact
Us","icon":"menu"},
{"title":"About","icon":"menu"},{"title":"Service
Center","icon":"menu"},
{"title":"Rate Us On Google Play","icon":"menu"},
{"title":"Logout","icon":"menu"}];
export default class SideBar extends React.Component {
render() {
return (
<Container>
<Content>
<ImageBackground source={require('../../assets/nav.png')} style={{
height: 150,
alignSelf: "stretch",
alignItems: "center",
flexDirection:'row'
}}>
<Image
style={{ height: 80, width: 80, borderRadius: 64, marginLeft: 25}}
source={{
uri: "http://safe-
pay.co/safepay/public/uploadedimg/user/avatar.png"
}}
/>
<View style={{flexDirection: 'column', marginLeft: 25}}>
<Text style= {{color: 'white'}}>Nima</Text>
<Text style={styles.emailText}>Nima33#gmail.com</Text>
</View>
</ImageBackground>
<List
dataArray={routes}
renderRow={data => {
return (
<ListItem
style={{borderBottomWidth: 0}}
button
onPress={() => this.props.navigation.navigate(data.title)}
icon>
<Left>
<Icon name={data.icon} style={{color:'gray'}}/>
</Left>
<Body>
<Text>{data.title}</Text>
</Body>
</ListItem>
);
}}
/>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
emailText: {
fontSize: 12,
color: 'white'
}
})
This is the output:
I set noLines and noBottomBorder as prop but they didn't work,If i set ottomBorderWidth:2 the bottom line size increase in width and height, Is these lines must be in list or there is any eay to remove it?
You should set noBorder as prop: <ListItem noBorder>.
Try to apply borderBottomWidth:0 in <List> instead of <ListItem> like below.
<List
dataArray={routes}
containerStyle={borderBottomWidth: 0}
renderRow={data => {
return (
<ListItem
style={{borderBottomWidth: 0}}
button
onPress={() => this.props.navigation.navigate(data.title)}
icon>
<Left>
<Icon name={data.icon} style={{color:'gray'}}/>
</Left>
<Body>
<Text>{data.title}</Text>
</Body>
</ListItem>
);
}}
/>
Apply borderBottomWidth:0 to ListItem and Body. If there is no Body then ListItem should be good enough.
For your specific case, just set the borderColor:white.
You can set the property property bottomDivider as false at the ListItem component.
I want to add my react-router links to Drawer. I tried this:
<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
<Link to="/businesspartners">
<MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
rightIcon={<CommunicationBusiness />}
>
Business Partners
</MenuItem>
</Link>
</Drawer>
My problem is that the link will render underlined (like the image below).
I had similar concerns with using styles directly and came across the following answer: https://stackoverflow.com/a/48252439/522859
To summarize, use the component attribute on the ListItem:
<List>
<ListItem button component={Link} to="https://www.google.com">
<ListItemText primary="Google" />
</ListItem>
</List>
The official docs cover it here: https://material-ui.com/api/list-item/
Use inline style textDecoration: 'none' for the link.
<Link> gets rendered as a standard <a> tag, which is why we can apply textDecoration rule there.
<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
<Link to="/businesspartners" style={{ textDecoration: 'none' }}>
<MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
rightIcon={<CommunicationBusiness />}
>
Business Partners
</MenuItem>
</Link>
</Drawer>
I have faced the same issue but maybe a new update in materialUI due to this is not working,
There has some tweak as import from import Link from '#material-ui/core/Link';
so it will works
import Link from '#material-ui/core/Link';
<List>
<ListItem button component={Link} href="/dsda">
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary="DashBoard"/>
</ListItem>
</List>