<mk-dropdown toggleText="Basic Toggle" buttonStyleClass="btn btn-success dropdown-toggle">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</mk-dropdown>
<button #separatedToggleElement type="button" class="btn btn-warning dropdown-toggle">
Separated Toggle <span class="fa fa-info-circle"></span>
</button>
Then, somewere else...
<mk-dropdown [toggleElement]="separatedToggleElement">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</mk-dropdown>
<div class="input-group">
<div mk-dropdown class="input-group-btn" [isWrapper]="false">
<mk-dropdown-toggle>
<button #toggleElement type="button" class="btn btn-default dropdown-toggle">
Input Toggle
<span class="fa fa-caret-down"></span>
</button>
</mk-dropdown-toggle>
<mk-dropdown-menu>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</mk-dropdown-menu>
</div>
<input type="text" class="form-control">
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div mk-dropdown class="btn-group" [isWrapper]="false">
<mk-dropdown-toggle>
<button #toggleElement type="button" class="btn btn-default dropdown-toggle">
<span class="fa fa-caret-down"></span>
</button>
</mk-dropdown-toggle>
<mk-dropdown-menu>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</mk-dropdown-menu>
</div>
</div>
Name | Type | Default | Description |
---|---|---|---|
buttonStyleClass | string | btn btn-default dropdown-toggle | Defines the toggle button classes. |
contentStyleClass | string | null | Defines the content list classes. |
isCollapsed | boolean | true | Defines if dropdown is collapsed. |
isWrapper | boolean | true | Defines if dropdown component is wrapped by a div. |
styleClass | string | dropdown | The dropdown style classes. |
toggleElement | Element | null | Set the toggle dropdown element if outside of the component or within mk-dropdown-toggle. |
toggleText | string | null | The dropdown toggle text if default button used. |
Name | Parameters | Description |
---|---|---|
onCollapseStart | event: browser event | Callback to invoke before dropdown toggle |
onCollapseDone | event: browser event | Callback to invoke after dropdown toggle |