If I want to use a Divider or something else that isn't a Tab inside Material-UI Tabs, I get DOM warnings in the console.
<Tabs ...>
//...
<Divider />
//...
</Tabs>
A workaround for this is to create a middleman-kind class like this:
<Tabs ...>
//...
<MDivider />
//...
</Tabs>
function MDivider(props) {
return <Divider />;
}
But I was thinking if this is the best solution to solve the issue or if there are other, better ways to stop getting the warning.
codesandbox with error here
codesandbox with fix here
Ok, so I think I found the best fix based on how the MUI Tabs are meant to be used. If Tabs are only meant to have MUI Tab children inside, then the MUI-intended way to do this would be to add the Divider like this:
<Tab label="" icon={<Divider />} disabled />
, give it a className and style it accordingly. The Tab component is a button with stuff inside, so you would need to override some paddings and min-heights in css.
you can use the Dividers in between each Tab as follows:
<Box
style={{
display: "flex",
justifyContent: "flex-end",
marginRight: 20,
}}
>
<Tabs
sx={{ backgroundColor: "#EAEBEF", borderRadius: 4 }}
value={tab}
onChange={(e, v) => setTab(v)}
>
<Tab label="Item One" />
<Divider
orientation="vertical"
style={{ height: 30, alignSelf: "center" }}
/>
<Tab label="Item Two" />
<Divider
orientation="vertical"
style={{ height: 30, alignSelf: "center" }}
/>
<Tab label="Item Three" />
</Tabs>
</Box>
Using CSS to add a border to the top of the tab seems to work well for me.
const useStyles = (theme) => ({
withDivider: {
borderTop: `1px solid ${theme.palette.divider}`,
},
});
<Tabs>
<Tab>...<Tab/>
<Tab>...<Tab/>
<Tab className={classes.withDivider}>...<Tab/>
<Tab>...<Tab/>
</Tabs>
Just for anyone wondering why the divider doesn´t show up, add the orientation property and set it to "vertical" so the divider can be visible in horizontal Tabs.
<Tab label="" icon={<Divider orientation="vertical" />} disabled />
Related
I was using material-ui scrollable tabs (https://mui.com/material-ui/react-tabs/#scrollable-tabs).
like this code..
<Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
style={{ position: 'fixed', backgroundColor: 'white' }} // I add this line!
>
<Tab label="전체" component={Link} to="/main"></Tab>
<Tab label="치킨" component={Link} to="/main/chicken"></Tab>
<Tab label="피자/양식" component={Link} to="/main/pizza"></Tab>
<Tab label="중식" component={Link} to="/main/chinese" />
<Tab label="한식" component={Link} to="/main/korean" />
<Tab label="일식/돈까스" component={Link} to="/main/japanese" />
<Tab label="족발/보쌈" component={Link} to="/main/pork" />
</Tabs>
In the meantime, I want to fix header and scrollable tab when I scroll through the posts like below picture.
so I add style={{position: 'fixed'}}code to header and scrollable tab.
As a result, Fixing header and scrollable tabs works fine.
But in scrollable tab, tab scrolling doesn't work as well as it used to be.
How can I handle this?? Please help me ....
You should add style={{position: 'fixed'}} in the parent element of Tabs :
<Box sx={{ maxWidth: 320, position: 'fixed', bgcolor: 'background.paper' }}>
<Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
>
<Tab label="전체" component={Link} to="/main"></Tab>
</Tabs>
</Box>
Demo:
https://codesandbox.io/s/labtabs-material-demo-forked-bx030i?file=/demo.tsx
Now i have used state hook to hide the Form when the page loads. And upon the click or toggle of the radio I'm able to show the Form, But if i toggle the radio again, the form is not hiding.
This is what i have implemented:
const WelcomeTab = () => {
const [toggle, settoggle] = useState(false);
return (
<React.Fragment>
<Tab.Pane
style={{
borderRadius: '7px',
padding: '30px',
}}
attached={false}
>
<Grid>
<Grid.Row>
<Grid.Column floated="left" width={8}>
<Header
style={{
fontSize: '18px',
fontFamily: 'Nunito-Regular',
color: '#4F4F4F',
}}
>
Welcome Screen
</Header>
</Grid.Column>
<Grid.Column floated="right" width={4}>
<Header
as="h4"
style={{
display: 'flex',
justifyContent: 'space-around',
marginLeft: '30px',
}}
>
Customize
<Radio toggle onChange={() => settoggle({ toggle: !toggle })} />
</Header>
</Grid.Column>
</Grid.Row>
</Grid>
{toggle ? (
<Form style={{ paddingTop: '20px' }}>
<Form.Field>
<label style={lableStyle}>Title</label>
<input style={{ marginBottom: '20px' }} />
<label style={lableStyle}>Message</label>
<TextArea />
</Form.Field>
</Form>
) : null}
</Tab.Pane>
</React.Fragment>
);
};
const lableStyle = {
fontFamily: 'Nunito-Regular',
fontWeight: 400,
color: '#4F4F4F',
fontSize: '15px',
display: 'inline-block',
marginBottom: '10px',
};
export default WelcomeTab;
try to add useEffect hook along with change like below,
you no longer need to {} this is old syntax of setState, using hooks we directly make the changes, hope this helps
useEffect(()=>{},[toggle])
replace this wrong syntax code, i can see its not json its boolean value
<Radio toggle onChange={()=>settoggle({toggle: !toggle})}/>
as this is old syntax not work with hooks, try to implment this instead,
<Radio toggle onChange={()=>settoggle(!toggle)}/>
I have two charts on top of each other that extend to the bottom of the screen. The first is collapsible via an Accordion.
However, if I do the following two things in sequence:
Make my browser window bigger
Then, collapse the Accordion (i.e., minimize the first graph).
Then there will be unwanted whitespace below the second graph.
<Flex direction="column" height="calc(100vh)" className="flex-wrapper">
<Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
<Flex className="flex-wrapper0">
<div>123456789010</div>
<Box className="accordion-box-container">
<Accordion className="accordion-wrapper" allowToggle>
<AccordionItem>
<h2 className="accordion-title">
<AccordionButton
className="accordion-button"
borderRadius="md"
borderWidth="0px"
_focus={{ boxShadow: "none" }}
>
<Box
textAlign="left"
h={3}
_focus={{ boxShadow: "none" }}
></Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel p="0">
<Box height="30vh">
<ThreeDataPoint />
</Box>
</AccordionPanel>
</AccordionItem>
</Accordion>
<div className="graph-wrapper">
<ThreeDataPoint />
</div>
</Box>
</Flex>
</Flex>
It seems like some interaction problem between browser resizing and css? I think I need to force a re-rendering of <ThreeDataPoint /> whenever the accordion button is pressed so that it can pick up the new height that it's supposed to be using. I wonder how to force such a re-rendering?
Here's codesandbox:
https://codesandbox.io/s/elegant-fermat-bugv1?file=/src/index.tsx
And the app URL:
https://bugv1.csb.app/
It was because of this !important flag causing troubles in the css file:
.graph-wrapper div {
height: 100% !important;
}
After commenting this out, it worked as expected.
Good morning,
I am in love with MUI, there is so much one can do. However, after using it extensively, I have noticed that a MUI Divider does not show up when it is the child of a Container or Paper component. I can't find anything as to why this is the case, so it is probably my implementation. Could someone check it out and see why it isn't appearing?
Everything is imported, the Popover works fine.
Thank you!
navBarPopover: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<Container className={clsx(classes.navBarPopover)}>
<Button className={clsx(classes.loginButton)} component={Link} to="/user_auth" onClick={() => handleClose()}>
Login
</Button>
<Divider />
<Button className={clsx(classes.loginButton)} component={Link} to="/faqs" onClick={() => handleClose()}>
FAQs
</Button>
</Container>
</Popover>
I agree, Material-UI is really awesome.
In this issue, you're giving display:'flex' to the parent container. By giving flex, the child elements take the minimum possible width as flex-shrink is there on child elements by default.
So, here the Divider is there but its width is 0. Provide width to 100%.
<Divider style={{width:'100%'}} />
Check the demo here:- https://codesandbox.io/s/happy-euler-2ycv4
As you can see in the docs, the default positioning for the title in react-native-paper is left-aligned. I've seen multiple questions and answers about how to implement a centered title both for Android Native as well as React Native's StackNavigator, but I am having no luck pulling off the same effect with react-native-paper.
So far I have tried using the style parameter in Appbar.Header to pass in { textAlign: 'center' } or { flexDirection: 'row', justifyContent: 'space-between' }, but nothing seems to work. I'm not very impressed with react-native-paper's lack of documentation on overrides, but I still hope there's a way to do what I'm looking for.
const styles = { header: { textAlign: 'center' }}
<Appbar.Header style={styles.header}>
<Appbar.Action icon="close" onPress={() => this.close()} />
<Appbar.Content title={title} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
Considering title accept a node, it can be used to display a react component.
How can I force center the title on all devices?
react-navigation allows passing a component for title instead of a string, so we can do the same thing here:
I wrote an example that accepts a custom title component and can be used wherever we want:
import * as React from 'react';
import { Appbar, Button, Text } from 'react-native-paper';
const ContentTitle = ({ title, style }) => (
<Appbar.Content
title={<Text style={style}> {title} </Text>}
style={{ alignItems: 'center' }}
/>
);
const App = () => (
<Appbar.Header>
<Appbar.Action icon="close" onPress={() => this.close()} />
<ContentTitle title={'Title'} style={{color:'white'}} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
);
export default App;
You can check: https://snack.expo.io/r1VyfH1WL
There is 2 approach for this.
First,
The Appbar.Content has marginLeft applied to it. So, you just need to set the marginLeft to 0.
<Appbar.Header>
<Appbar.BackAction />
<Appbar.Content title='Title' style={{ marginLeft: 0 }} titleStyle={{ marginLeft: 0 }} />
// Put empty action here or any action you would like to have
<Appbar.Action/>
</Appbar.Header>
Sadly, this approach only allowed one menu action on the right. (or have an equal amount of actions both left and right, but I think only one menu action will be on the left side, that is back button)
Second, make the Appbar.Content has an absolute position. And yes, keep the marginLeft to 0.
<Appbar.Content title='Title'
style={{ marginLeft: 0, position: 'absolute', left: 0, right: 0, zIndex: -1 }}
titleStyle={{ alignSelf: 'center' }} />
We need to set the zIndex to -1 (or lower) so the button/menu action is clickable. This way, you can have more than one menu actions.
The first way is simple but limited, while the second way is powerful but more code to write.
You have to use titleStyle instead of style to center the text. The below code is working for me.
<Appbar.Header>
<Appbar.Content titleStyle={{textAlign: 'center'}} title="Centered Title" />
</Appbar.Header>
There is also a similar subtitleStyle for styling the subtitle. Check the docs for more info.
For 'react-native-paper', this snippet worked for me:
<Button
style = {{justifyContent: 'center'}}
>
Press
</Button>
This should align both text/node title:
<Appbar.Content
title={<Text>title</Text>}
style={{ alignItems: 'center' }}
/>
See https://snack.expo.io/rJUBIR6lU
<Appbar>
<Appbar.Content titleStyle={{alignSelf: 'center'}} title='something' />
</Appbar>