vmware Clarity：为每个下拉项定义不同的 clrCloseMenuOnItemClick 行为

Question

我有一个标准的 Clarity 下拉菜单，我需要定义每个项目的 "close menu on item click" 行为：所以点击第一个下拉菜单项目应该关闭菜单，点击第二个项目不应该.这可能吗？我确信这不是 Clarity 团队的预期行为，但在我非常罕见的用例中这是有道理的。

我正在使用 Angular 6 和 Clarity 0.13.0

Answer 1

您可以通过在 [(clrIfOpen)] 上使用双向绑定轻松执行此自定义行为，以在少数情况下强制关闭下拉列表。这是一个运行示例：https://stackblitz.com/edit/dropdown-close-on-some-clicks?file=src/app/app.component.html

请注意，我必须使用 <ng-template> 的去糖化语法才能使用结构指令的双向绑定：

<clr-dropdown [clrCloseMenuOnItemClick]="false">
  <button clrDropdownTrigger>...</button>
  <ng-template [(clrIfOpen)]="open">
    <clr-dropdown-menu>
      <button type="button" clrDropdownItem>Does not close</button>
      <button type="button" clrDropdownItem (click)="close()">Closes the dropdown</button>
      <button type="button" clrDropdownItem>Does not close either</button>
    </clr-dropdown-menu>
  </ng-template>
</clr-dropdown>

vmware Clarity：为每个下拉项定义不同的 clrCloseMenuOnItemClick 行为

vmware Clarity: Define different clrCloseMenuOnItemClick behaviour per dropdown item

angular

vmware-clarity

clarity