search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.27k stars 32.12k forks source link

Implement "bottom sheets" functionality #2126

Closed markshust closed 6 years ago

markshust commented 8 years ago

I'd like to use a "fully expanded bottom sheet", ex. https://www.google.com/design/spec/components/bottom-sheets.html#bottom-sheets-modal-bottom-sheets

This functionality is quite needed for modal's that slide up from the bottom. I didn't notice it anywhere in the code.

rkstar commented 8 years ago

something like what materializecss has done would be perfect.

this is the code implementation of their leanModal component

markshust commented 8 years ago

Similar to the bottom sheet style, yes. But also with fully expanded option to go full screen modal.

justjacksonn commented 8 years ago

May as well make it capable of any side, not just bottom, as well as center out, etc.

markshust commented 8 years ago

I believe the material in this case is only supposed to be derived from the bottom up, as that is where the paper is coming from. I guess you can leave it up to the user though, to not follow this if they wish :)

chadfurman commented 7 years ago

Where are we at with this ticket? It looks like I should just use https://github.com/TeamWertarbyte/material-ui-bottom-sheet

xsh2047 commented 7 years ago

This component is very similar to the Drawer component, would we just refactor to incorporate the additional features or utilize it?

kgregory commented 7 years ago

@chadfurman @markoshust As @zabieru96 points out, the Drawer component supports opening from the bottom (see demo).

This could be a decent starting point for you. To implement a fully-expanded bottom sheet using a drawer, you'd set anchor to bottom, override the anchorBottom class so that top is set to 0 instead of auto, and include a toolbar with a close button.

Perhaps this is all we'd need to do for an initial offering of BottomSheet:

@oliviertassinari I know you had done some nice work with bottom sheets before, what do you think?

oliviertassinari commented 7 years ago

@kgregory One important limitation we have with the Drawer is that it's not supporting touch events. This is something we could fix later, but it's an important limitation on mobile. We can always build the feature on top of the Drawer, but this is going to require quite some work. We can also build the component on top of the Modal. That might be simpler. I can't say for sure without trying.