我可以在Bulma选项卡中使用Bulma下拉菜单吗？

Question

我用的是Nuxt.js和Bulma。我正在使用Bulma标签(https://bulma.io/documentation/components/tabs/)进行导航。

我想插入Bulma dropdown(https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable)。但是它不能在Tabs中间工作。

我知道谁想使用Bulma dropdown需要使用javascript，所以我使用它。但它不起作用。

我怎么才能修复它？

Answer 1

要在Bulma的选项卡中使用下拉菜单，您需要调整tabs div中的溢出CSS。我不确定为什么我必须设置overflow-x和overflow-y来让它正常工作，但我做到了。

当下拉菜单处于活动状态时：

overflow-x : visible;
overflow-y : visible;

当下拉菜单未激活时，重置为其默认值：

overflow-y : hidden;
overflow-x : auto;

Answer 2

是的，你可以只需要一点点的摆弄

主要有两个问题：

问题1

由于bulma选项卡容器是flexbox，并且选项卡列表是此flexbox的子项，因此下拉列表将不可见，因为它溢出出flexbox容器。

如果您添加overflow-y:对选项卡容器div可见，将会发生滚动，这不是我们需要的行为

解决方案

为了解决这个问题，要在选项卡选择上显示的内容也应该作为第二个子项出现在选项卡容器中，以便选项卡列表中的下拉按钮/链接在单击/悬停时有空间显示下拉。

#tab-container {
 flex-direction: column;
 height: 500px;
 width: 100%
}

#content-child {
 flex-grow: 1;
 width: 100%
}

#list-child {
 flex-grow: 0; //should be set to 0 as it will take up vertical space (it is set to 1 in bulma)
 width: 100%;
}

问题2

当在bulma选项卡中使用dropdown时，dropdown中的锚定标签由tabs.This中为锚定标签指定的样式是主要问题之一。

这样显示的下拉列表将有非常不同的样式。

解决方案

div Bulma下拉菜单还允许我们在中插入。

我们可以利用这一点来克服问题1。

只需在dropdown中为div添加此css，以使其行为类似于链接。

div.dropdown-item.is-active {
  background-color: rgba(55, 122, 195, 0.95);
  color: #fff;
}

div.dropdown-item {
  padding-right: 3rem;
  text-align: left;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
}

div.dropdown-item:hover {
  background-color: whitesmoke;
  color: #0a0a0a;
}

完整的解决方案可以在下面看到，您可以根据需要根据您的用例进行更改。

​

div.dropdown-item.is-active {
  background-color: rgba(55, 122, 195, 0.95);
  color: #fff;
}

div.dropdown-item {
  padding-right: 3rem;
  text-align: left;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
}

div.dropdown-item:hover {
  background-color: whitesmoke;
  color: #0a0a0a;
}

#content-child {
  flex-grow: 1;
  width: 100%
}

#tab-container {
  flex-direction: column;
  height: 500px;
  width: 100%
}

#list-child {
  flex-grow: 0;
  width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.1/css/bulma.min.css" rel="stylesheet" />


<div class="tabs is-boxed" id="tab-container">
  <ul id="list-child">
    <li><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
    <li class="dropdown is-active">
      <div class="dropdown-trigger">
        <a class="has-text-right custom-padding" aria-haspopup="true" aria-controls="dropdown-menu">
            Drop Down
          </a>
      </div>

      <div class="dropdown-menu" id="dropdown-menu" role="menu">
        <div class="dropdown-content">
          <div class="dropdown-item">Dropdown item</div>
          <div class="  dropdown-item">Other dropdown item</div>
          <div class="  dropdown-item is-active">Active dropdown item</div>
          <div class="  dropdown-item">Other dropdown item</div>
          <hr class="dropdown-divider" />
          <div class="  dropdown-item">With a divider</div>
        </div>
      </div>
    </li>
  </ul>
  <div id="content-child">
    content
  </div>
</div>

​