javascript - 如何在不使用按钮的情况下使 Bootstrap 下拉？ ( Angular 4+)

Question

我正在使用 Angular 8，我需要做一个简单的下拉菜单。我的设计是这样的:

StackBlitz

但唯一的区别是我不想使用按钮样式，而是需要人字形。只是一个简单的下拉菜单，我可以在该下拉菜单中单击不同的链接。

Answer 1

我的理解是，您需要删除按钮样式的下拉触发器，而需要添加一个人字形图标。

我添加了 font-awesome通过将 css 导入到 styles.css 文件来将其添加到元素中。

样式.css

/* Add application styles & imports to this file! */
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")

app-component.html

<div class="container" style="margin-top: 10%">
  <div class="btn-group" dropdown>
    <span id="button-basic" dropdownToggle aria-controls="dropdown-basic">
      <i class="fa fa-chevron-down"></i>
    </span>
    <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
        role="menu" aria-labelledby="button-basic">
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
      </li>
    </ul>
  </div>
</div>

您可以根据需要向 V 形添加任何其他样式。