I got a problem with Swipeable drawer from Material UI. In normal Drawer isnt nessesary to add function onOpen. SO my question is what should I add thare?
container={container}
variant="temporary"
open={mobileOpen}
anchor="left"
onClose={handleDrawerToggle}
onOpen={}
The "onOpen" is used for "opening" the drawer (its the behavior it will have when it opens) If you want a persistent drawer (always open) there are other options there!
adding: Within the onOpen you should handle the change of value so react knows it is open and material ui make the transition.
https://material-ui.com/components/drawers/#permanent-drawer
Good luck!
Related
I am using an ant design modal on my site which is internationalized. The modal works fine for all languages except Arabic. When it is on Arabic, when you click the 'next' button, it should show you the next page of the modal, but it just shows a blank modal. I suspect because Arabic is a RTL language, this issue would be solved if I could get the modal to slide in the other direction when the user hits next. I see on Ant Design's documentation they have some mention of RTL functionality on the modal page, but I'm not sure how to implement it. It says
Modal.method() RTL mode only supports hooks.
but i'm not sure what it means by that.
On this configuration page it mentions a direction prop, but I passed it a string "rtl" and that didn't seem to have an effect. It says the prop type should be rtl or ltr, so it shouldn't take a string?
Use configProvider and wrap all antd components in it with direction="rtl". you can also apply it conditionally: direction={condition ? "rtl" : "ltr"}.
import { ConfigProvider } from 'antd';
// ...
export default () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);
Reference: https://ant.design/components/config-provider/?theme=dark#header
The material-UI react stepper control steps do not receive the tab focus. Is there a way to enable tabFocus on the steps?
https://material-ui.com/components/steppers/
Already I see tabFocus is exist on the steps but the styles are not show. I think if you add focusRipple props attribute
<StepButton focusRipple onClick={handleStep(index)} completed={isStepComplete(index)} {...buttonProps}>
{label}
</StepButton>
true on the StepButton component you might be able to see the tab focus
https://codesandbox.io/s/material-demo-4m4si
I remade the simple popover example on this page except using mouse hover props:
https://codesandbox.io/s/eager-dewdney-yt3v-yt3vb
<Button
variant="contained"
onMouseEnter={e => setAnchorEl(e.currentTarget)}
// onMouseLeave={() => setAnchorEl(null)}
>
As soon as onMouseLeave is uncommented the above code sandbox will break silently. The UI will appear fine but the popover will not display. I have found the same to happen in my actual project.
Commenting onMouseLeave will at least allow onMouseEnter to work correctly with the popover, but it is then stuck on screen.
Am I not using onMouseLeave correctly here?
If it is being used correctly but appears to be a library related bug, what mouse based alternative could be used in place of onMouseLeave above?
I ran into the same issue, and I did not want to use a Tooltip.
The fix is to add a style to the popup to suppress the additional onMouseLeave() event that gets fired right after the popup opens:
<Popover
style={{ pointerEvents: 'none' }}
>
{children}
</Popover>
I found the fix here.
I'm currently having troubles with the material-ui drawer (https://material-ui-next.com/ one)
When I open the mini variant, the collapse inside my menu resets (closes because of the "remount").
However I would like them to persist their current state (open/closed).
Does Anyone know a way to achieve this?
The drawer:
<Drawer type="permanent"
classes={{paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose)}}
open={this.state.open}>
<div className={classNames(classes.drawerInner)}>
<Navigation updateTitle={this.updateTitle}/>
</div>
</Drawer>
The navigation component: https://pastebin.com/webdmLXp
Rendered with open collapse:
After clicking the burger button:
Sure Mr who I share my lastname with, you need to keep state of each <MenuItem>. Just add an onClick to each menuItem and toggle the state in your component. This does not really relate to Material-ui, but is more a general React question.
I am trying out Drawer component of Google's material UI library. I have it configured and working but the problem is, it's overlapping on the underlying navigation bar on my web app. Is there a way I can have the drawer functionality of this library restricted to {entireScreen - topNavigationBar} area?
Here is what my render function returns
<div>
<NavBar />
<div>
<Button onClick={this.handleLeftOpen}>Menu</Button>
<Drawer
open={this.state.open.left}
onRequestClose={this.handleLeftClose}
onClick={this.handleLeftClose}>
{leftDrawerList}
</Drawer>
</div>
</div>
If you look at Drawer styles, you'll see that it has z-index: 1300 property. So I suppose you should give your Navbar z-index that is greater than 1300