React中的滑动菜单

Question

我想在react中创建一个文件分隔符样式菜单。我对css不太熟悉，所以我需要一个起点。我发现了很多这样的菜单组件，但它们都是整页。

我不明白如何创建组件的形状，如果它是一个简单的矩形，它是可能的，但形状是矩形加按钮，我不知道如何管理它。

它看起来像这样：

更改单击“过滤器菜单”，它将滑入视图：

Answer 1

这实际上只是一个CSS / HTML问题。但是，要从头开发：

• 绘制一个两列表，并在第二个字段中显示该按钮

要么

• 使用Div容器并相应地设置它们

旁注：通常你会使用像bootstrap甚至ant.design这样的东西。在那里你已经准备好使用table components可能过滤（至少使用ant.design），并且对于过滤器seection popup你可以使用像模态组件这样的东西。

Answer 2

试试这样吧

.menu-container {
  display: inline-block;
  position: fixed;
  top: 30%;
  left: 0;
}
.menu-body {
  display: inline-block;
  height: 200px;
  width: 100px;
  border: 1px solid black;
}
.activate-button {
  display: inline-block;
  height: 50px;
  width: 20px;
  border: 1px solid black;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  vertical-align: top;
}

<div>
  <div class="menu-container">
    <div class="menu-body">
      
    </div>
    <div class="activate-button">
      
    </div>
  </div>
<div>