React中的滑动菜单

Question

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

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

它看起来像这样：

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

Answer 1

尝试这样

.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>

Answer 2

这实际上是仅CSS / HTML的问题。 但是，要从头开始开发：

• 绘制一个两列表格并将按钮放在第二个字段中

或

• 使用Div容器并相应设置其样式

侧面说明： 通常，您会使用引导程序甚至ant.design之类的东西。 在那里，您已经准备好使用table components进行过滤（至少使用ant.design），对于过滤器弹出窗口，您可以使用模式组件之类的东西。