javascript – ui-bootstrap下拉菜单中每行两项

2019年7月28日 156次阅读

我正在尝试仅使用
angularjs和ui-bootstrap为Web应用程序创建下拉菜单.菜单类似于您在桌面应用程序中看到的菜单,菜单应显示左对齐标签,热键提醒文本应右对齐,并在同一行.我在寻找这样的东西：

http://imgur.com/WevtfId

下拉按钮还需要位于工具栏中的内联元素,如配置.我正在创建一个可重用的组件,其中每个下拉菜单都由一个对象支持,因此菜单宽度必须以适合下拉列表中最长行长度的方式进行缩放.

以下是我在plunker中汇总的一些例子：https://plnkr.co/edit/RAMgcuVoibeLkHTz4Z3e?p=preview

例1.A显示了基本问题.当下拉列表中的第一个跨度变长时,它会将第二个跨度移到下一行.

  <span class="example-inline" uib-dropdown>
    <button type="button" class="btn btn-primary" uib-dropdown-toggle>
     A. Autowidth Dropdown
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu>
      <li ng-repeat="item in ctrl.items">
        <a>
          <span style="float:left">{{item.label}}</span>
          <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span>
        </a>
      </li>
    </ul>
  </span>

例2.A有一个行为正确的下拉列表.不幸的是,我不得不将uib-dropdown指令附加到块元素,这意味着如果没有额外的工作,它将无法很好地放在工具栏中.

  <span class="example-block" uib-dropdown>
    <button type="button" class="btn btn-primary" uib-dropdown-toggle>
     A. Autowidth Dropdown
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu>
      <li ng-repeat="item in ctrl.items">
        <a>
          <span style="float:left">{{item.label}}</span>
          <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span>
        </a>
      </li>
    </ul>
  </span>

.example-block {
  padding: 5px 20px;
  display: block;
}

在示例1.D中,我在下拉菜单中放置了一个表.这给了我想要的行为,但是会涉及到我之前存在的功能的更大的重构.

  <span class="example-inline" uib-dropdown>
    <button type="button" class="btn btn-primary" uib-dropdown-toggle>
     D. Nowrap Table in Dropdown
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu>
      <table style="white-space: nowrap;" class="dropdown-table">
        <tr  ng-repeat="item in ctrl.items">
          <td style="width:90%">
            {{item.label}}
          </td>
          <td style="width:10%">
            {{item.hotkey}}
          </td>
        </tr>
      </table>
    </ul>
  </span>

这里有更清洁的解决方案吗？我更喜欢像1.A这样的一些css调整.如果有必要,我想避免使用大型重构器.谢谢！

最佳答案 一个干净的解决方案是使用css3 width max-content值

.width-max-content {
  width: max-content;
  width: -moz-max-content;
  width: -webkit-max-content;
}

在ul元素上有这个类：

<span class="example-inline" uib-dropdown>
    <button type="button" class="btn btn-primary" uib-dropdown-toggle>
     A. Autowidth Dropdown
    </button>
    <ul class="dropdown-menu width-max-content" uib-dropdown-menu>
      <li ng-repeat="item in ctrl.items">
        <a>
          <span style="float:left">{{item.label}}</span>
          <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span>
        </a>
      </li>
    </ul>
</span>

Plunker

现在这在chrome,firefox,safari中运行得很好,但不是因为IE中仍然不支持max-content(IE没有’-ms-max-content’版本).

对于IE而言,不那么干净的方式是对于锚标签上的热键字符串的最大宽度具有边距权限.

.hotkey-margin {
  margin-right: 6em;
}

在模板中：

<a class="hotkey-margin">
      <span style="float:left">{{item.label}}</span>
      <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span>
</a>

只有在内联元素的下拉列表中才有它.
此外,同时使用max-content& margin right会导致chrome / moz / safari中的问题,所以只有在IE的情况下才会添加类似这个类的添加条件. (或者您可以对所有浏览器使用这种不太干净的解决方案,并且不使用max-content width).

Plunker

附：我只考虑例1.A.其他1.D即’Nowrap Table in Dropdown’将是完美的我猜.

点赞