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

Question

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

我想插入布尔玛下拉菜单（https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable）。但这在Tabs中间不起作用。

我知道谁想使用布尔玛下拉菜单需要使用javascript，所以我使用它。但这不起作用。

我该如何解决？

Answer 1

要在Bulma的选项卡中使用下拉菜单，您需要在选项卡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容器溢出时将不可见。
如果您向tabs容器div添加了overflow-y：visible，则会发生滚动，这不是我们所需要的行为

解决方案

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

#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选项卡中使用下拉菜单时，下拉菜单中的锚标签将根据为标签中的锚标签指定的样式进行样式设置。这是主要问题之一。
因此，显示的下拉菜单的样式将非常不同。

解决方案

布尔玛下拉菜单还允许我们在其中插入div 。
我们可以利用它来解决问题1。
只需在下拉列表中为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>