Question

我正在寻找能够实现以下目标的网络组件：

您可以在其中附加元素列表（在我的案例中为<button>元素）
当元素调整大小使得按钮不再适合一行时，溢出的按钮逐渐移动到右侧的下拉列表中，直到所有内容再次适合一行

我所描述的类似于Bootstrap响应式导航栏（当屏幕宽度低于某个阈值时，标题中的按钮会移动到下拉列表中）： https://getbootstrap.com/examples/navbar/

但是，有两个很大的区别：

这需要响应父级的大小修改（DOM元素），而不是整个浏览器窗口
按钮需要逐渐移动到下拉列表中（一旦超过特定的屏幕宽度，就会出现上述导航栏中的所有按钮）

一些HTML示例：

<div id="parent" style="width: 50px">
  <button-bar style="width: 100%">
    <button>hello 1</button>
    <button>hello 2</button>
    <button>hello 3</button>
    <button>hello 4</button>
  </button-bar>  
</div>

<!-- because the above 4 buttons would not fit on a 50px line -->
<!-- resulting HTML should look something like below -->

<div id="parent" style="width: 50px">
  <button-bar style="width: 100%">
    <button>hello 1</button>
    <button>hello 2</button>
    <dropdown-button>
      <!-- these buttons would be hidden until the dropdown button is clicked to reveal a popover -->
      <button>hello 3</button>
      <button>hello 4</button>
    </dropdown-button>
  </button-bar>  
</div>

是否有任何现有的库可以实现此功能？是否有任何建议可以实现类似的事情，不涉及每隔几毫米轮询一次父母的大小？

可调整大小的Web按钮栏组件

0 个答案: