ant-design Responsive Sider should have an option to collapse / expand on mobile devices without squashing the main content

ih99xse1 于 2022-12-31 发布在其他

关注(0)|答案(6)|浏览(172)

I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Currently when using Responsive Sider on a smaller screen, when the sider appears it would have to squash the main content (and all contents within it). It is not a big problem on bigger mobile devices like an iPad but on cellphones it creats chaos and unnecessary performance expense.

I propose a property called "expandBehavior" which let the user to choose when the sider appears should it be "over the top" of the main content, or "At the side" of the main content.

What does the proposed API look like?

<Sider width={300} breakpoint="lg" collapsedWidth="0" expandBehaviour="overTheTop">
    {children}
</Sider>

The above setting should allow the Sider to be on top of the main content with absolute positioning, 100% height of the screen and a dark overlay to cover the content when Sider appears.

<Sider width={300} breakpoint="lg" collapsedWidth="0" expandBehaviour="sideBySide">
    {children}
</Sider>

The above setting should allow the Sider to be at the side of the content . This is the current behaviour.

ant-design

来源：https://github.com/ant-design/ant-design/issues/23111

6条答案

按热度按时间

pkwftd7m1#

I'm waiting for it too :)

赞(0）回复(0）举报 2022-12-31

dphi5xsq2#

I created Drawer for mobile menu and sider for desktop and it works and look very well

赞(0）回复(0）举报 2022-12-31

mlmc2os53#

I am having that issue too...

The ideal state would be:

Sider full width on large screen
Sider with icon only and reduced width on medium screens
Sider entirely collapsed on small screens with menu icon that would trigger the Sider to overlay the content, not squash it.

赞(0）回复(0）举报 2022-12-31

aelbi1ox4#

Any updates on this? This is a very important feature in my opinion. Even I require this in all the apps that I make with Ant design.

赞(0）回复(0）举报 2022-12-31

oprakyz75#

Is there an easy fix/hack for this?

赞(0）回复(0）举报 2022-12-31

5sxhfpxr6#

I've fixed this in couple of lines of css, there might be a better solution but this one works.

Import a fix.css with following contents

@media only screen and (max-width: 767.99px) {
    .ant-layout {
    position: relative;
    overflow: hidden;
    min-width: 100vw;
}}

赞(0）回复(0）举报 2022-12-31

我来回答

ant-design Responsive Sider should have an option to collapse / expand on mobile devices without squashing the main content

What problem does this feature solve?

What does the proposed API look like?

6条答案

相关问题

热门标签

最新问答