css - 使用 Chakra-UI 抽屉组件推送内容

Question

我正在学习如何使用 Chakra-UI 抽屉组件： https ://chakra-ui.com/docs/overlay/drawer 。它基本上做了我想做的一切，除了一个例外——它覆盖了内容，而不是把它推到一边。我想要的是一个右侧抽屉，当它打开时会将内容推到左侧。

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

谢谢。

Answer 1

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

1.不要使用抽屉。

2.而不是抽屉创建一个名为自定义抽屉（您可以命名enter code here任何）的组件，其中包含您需要的东西

在自定义抽屉中为父元素类名编写一些css，如下所示，类名将通过道具接受

.displayNone{
    display:none
}

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

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

我。

<customeDrawer class="displayNone"><customeDrawer>

二、

<customeDrawer class="displayBlock"><customeDrawer>

希望它会使用Full