angular - 是否可以通过编程方式控制清晰度下拉列表的显示/隐藏？

Question

是否可以通过组件的 ts 代码以编程方式控制下拉列表的显示/隐藏(使用 Angular2 清楚)- https://vmware.github.io/clarity/documentation/dropdowns

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

Answer 1

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

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

如果您在代码中设置 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