Можно ли программно управлять раскрывающимися списками отображения / скрытия ясности?

Можно ли программно управлять отображением / скрытием раскрывающихся списков из ts-кода компонента (для ясности с использованием Angular2) - https://vmware.github.io/clarity/documentation/dropdowns

В основном я пытаюсь использовать раскрывающийся список в качестве всплывающего уведомления, т.е. 2 триггера для отображения раскрывающегося содержимого 1. При нажатии 2. При событии, которое произошло в коде (ошибки в вызовах ajax и т. Д.)


angular vmware-clarity
person user2789284    schedule 15.09.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Как сказал Джереми выше, использование раскрывающегося списка для тоста или уведомления не является рекомендуемым шаблоном проектирования Clarity. Однако можно скрыть / показать раскрывающееся меню с помощью кода. См. Плункер ниже для примера, в котором используется директива *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

person hippeelee    schedule 15.09.2017
comment
Это не работает, если флаг open переключен напрямую (this.open = !this.open;). @hippeelee, у тебя есть идея, как это решить? setTimeout с задержкой 0 вроде работает, но мне кажется хакерским. - person Elias Rabl; 15.04.2020

arrow_upward
1
arrow_downward

Я не рекомендую использовать для этого раскрывающийся список. В 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>

So if you are determined to use it, you could use NgClass to conditionally toggle the class.

person Jeremy Wilken    schedule 15.09.2017