Question

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

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

Answer 1

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

*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

Answer 2

我不建议为此目的使用下拉列表。 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来有条件地切换该类。

是否有可能以编程方式控制显示/隐藏清晰度下降？

2 个答案: