3

是否可以从组件的 ts 代码中以编程方式控制下拉菜单的显示/隐藏（清晰地使用 Angular2）- https://vmware.github.io/clarity/documentation/dropdowns

基本上我正在尝试使用下拉作为 toast 通知，即 2 个触发器来显示下拉内容 1. 单击 2. 在代码中发生的事件（ajax 调用中的错误等）

4

2 回答 2

3

正如 Jeremy 上面所说，使用下拉菜单来表示敬酒或通知并不是推荐的 Clarity 设计模式。但是，可以使用代码隐藏/显示下拉菜单。有关使用该指令的示例，请参见下面的 plunker *clrIfOpen。

该*clrIfOpen指令尚未在网站上记录，但我们正在努力更新它以反映这些情况下的使用情况。

如果您在代码中设置 open 属性，您可以隐藏/显示clr-dropdown-menu

<clr-dropdown>
    <button clrDropdownTrigger class="btn">
      Dropdown Toggle
      <clr-icon shape="caret down"></clr-icon>
    </button>
    <clr-dropdown-menu *clrIfOpen="open" clrPosition="bottom-left">
      <label class="dropdown-header">Dropdown header</label>
      <a href="javascript://" clrDropdownItem>Action 1</a>
      <a href="javascript://" clrDropdownItem>Action 2</a>
      <div class="dropdown-divider"></div>
      <a href="javascript://" clrDropdownItem>Link 1</a>
      <a href="javascript://" clrDropdownItem>Link 2</a>
    </clr-dropdown-menu>
  </clr-dropdown>

https://plnkr.co/edit/ZbXWnyMx0thImLXNTqkw?p=preview

注意：您的问题有助于确定使用这样的下拉菜单的问题，在第一次渲染时，菜单的位置不正确。如果这影响到您，请在此处订阅以获取更新。

https://github.com/vmware/clarity/issues/1474

于 2017-09-15T20:11:30.287 回答
1

我不建议为此使用下拉菜单。Clarity 没有任何祝酒词，因此也许您可以使用警报或设计不同的 UX 来解决核心问题。

但是，下拉列表的静态 CSS 版本通过将类添加到组件来切换下拉列表，open如下所示：

<div class="dropdown open">
<button type="button" class="dropdown-toggle btn btn-link">
    Dropdown Toggle
    <clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
    <h4 class="dropdown-header">Dropdown header</h4>
    <button type="button" class="dropdown-item">Lorem.</button>
    <button type="button" class="dropdown-item">Lorem ipsum.</button>
    <button type="button" class="dropdown-item">Lorem ipsum dolor.</button>
    <div class="dropdown-divider"></div>
    <button type="button" class="dropdown-item">Link</button>
</div>

所以如果你确定要使用它，你可以使用 NgClass 有条件地切换类。

于 2017-09-15T19:19:40.077 回答