是否可以通过编程方式控制 show/hide 清晰度下拉菜单？

Question

是否可以通过组件的 ts 代码以编程方式控制 show/hide 下拉列表（使用 Angular2 清楚）- https://vmware.github.io/clarity/documentation/dropdowns

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

Answer 1

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

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

<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 有条件地切换 class。

Answer 2

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

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

如果您在代码中设置打开属性您可以 hide/show 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

是否可以通过编程方式控制 show/hide 清晰度下拉菜单？

Is it possible to programmatically control the show/hide of clarity drop downs?

angular

vmware-clarity