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

Question

我正在使用 Nuxt.js 和 Bulma。我正在使用 Bulma 选项卡 (https://bulma.io/documentation/components/tabs/) 进行导航。

我想插入 Bulma 下拉菜单 (https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable)。但它在选项卡中间不起作用。

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

我该如何解决？

Answer 1

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

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

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

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

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

Answer 2

是的，你可以稍微摆弄一下

主要有2个问题：-

问题 1

由于 bulma 选项卡容器是 flexbox，并且选项卡列表是此 flexbox 的子项，因此下拉列表将不可见，因为它会溢出 flexbox 容器。
如果添加 overflow-y:visible 到tabs 容器 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 选项卡中使用下拉菜单时，下拉菜单中的锚标记将按照为选项卡中的锚标记指定的样式设置样式。这是主要问题之一。
因此显示的下拉菜单的样式将非常不同。

解决方案

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>