2017-09-15 14 views
2

はそれをプログラム(Angular2を使用して明快で)コンポーネントのTSコードからドロップダウンの表示/非表示を制御することが可能である - https://vmware.github.io/clarity/documentation/dropdowns明確にドロップダウンの表示/非表示をプログラムで制御できますか?

基本的に私は、トースト通知としてダウンすなわち2のトリガーをドロップを使用しようとしていますドロップダウンの内容を表示する 1.クリック時 2.コードで発生したイベント(ajax呼び出しのエラーなど)

答えて

2

Jeremyが上で述べたように、トーストや通知のドロップダウンを使用することは、推奨されるClarityデザインパターンではありません。ただし、コードでドロップダウンメニューを表示/非表示することは可能です。 *clrIfOpenディレクティブを使用する例については、下のプランカを参照してください。

*clrIfOpenディレクティブはまだサイトには記載されていませんが、これらの場合の使用方法を反映するように更新中です。あなたが非表示にすることができ、あなたのコード内で開いているプロパティを設定した場合

/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

1

この目的のためにドロップダウンを使用することはお勧めしません。 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。

関連する問題