微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用 Chakra-UI Drawer 组件推送内容

如何解决使用 Chakra-UI Drawer 组件推送内容

我正在学习如何使用 Chakra-UI 抽屉组件:https://chakra-ui.com/docs/overlay/drawer。它基本上完成了我想要它做的所有事情,只有一个例外——它涵盖了内容而不是将其推到一边。我想要的是一个右侧抽屉,当它打开时会将内容推到左侧。

Chakra-UI Drawer 组件可以做到这一点吗?如果是这样,我该怎么做?

谢谢。

解决方法

我不确定这个解决方案,但你可以试试这个

1.不要使用抽屉。

2.代替抽屉创建一个名为自定义抽屉的组件(您可以命名enter code here任何),其中包含您需要的东西

在自定义 Drawer 中为父元素类名编写一些 css 如下,类名将被道具接受

.displayNone{
display:none
}

.displayNone{
display:block;
position:absolute;
top:0px;
left:0px;
width:400px
overflowX:scroll
}

3.现在通过条件渲染组件,您必须传递以下组件

我。 二、

希望它会用满

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。