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

Question

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

使用Chakra-UI抽屉组件可以做到这一点吗？如果是这样，我该怎么做呢？

谢谢。

Answer 1

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

1.不要使用抽屉。

2.不是drawer，而是创建一个名为custom Drawer的组件(您可以将其命名为enter code hereany)，其中包含您需要的内容

在自定义抽屉中，为父元素编写一些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>

希望如此，它将UseFull