Question

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

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

以下是我在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调整。如果有必要，我想避免使用大型重构器。谢谢！

Answer 1

一个干净的解决方案是使用css3 width max-content value

.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＆amp; margin right会导致chrome / moz / safari中的问题，所以只有在IE的情况下才会添加类似这个类的添加条件。（或您可以为所有浏览器使用此不太干净的解决方案，并且不使用最大内容宽度）。

Plunker

P.S。我只考虑例1.A.其他1.D，即'Nowrap Table in Dropdown'将是完美的我猜。

ui-bootstrap下拉菜单

1 个答案: