semantic-ui-dropdown-canjs
v1.0.0
Published
A CanJS wrapper for Semantic UI dropdowns
Downloads
10
Readme
semantic-ui-dropdown-canjs
A CanJS wrapper for Semantic UI dropdowns
This wrapper allows you to use SemanticUI Dropdown with just html, no need to run jQuery plugin yourself.
A can.view.attr wrapper around the SemanticUI Dropdown. With can.view.attr
you can add custom behavior to elements that contain a specified html attribute. Since SemanticUI is a set of jQuery plugins, can.view.attr
is a natural way to invoke them in a CanJS or DoneJS application.
SemanticUI's CSS should be imported separately. You can use semantic-ui-css
package as in the included demo.
Demo
See the included demo /demo/demo.html (run npm install
, then http-server
in the project root and browse /demo/demo.html).
Installation
npm install semantic-ui-dropdown-canjs --save
Usage
To use it, simply add the semantic-dropdown
attribute to a Semantic UI Dropdown and bind to the hidden input. The value of the hidden input will become the lowercased inner text of the selected .item
.
<div class="ui selection dropdown" semantic-dropdown>
<input type="hidden" {($value)}="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item">Male</div>
<div class="item">Female</div>
</div>
</div>
You can also manually override the value by adding a data-value
attribute to each item.
<div class="ui selection dropdown" semantic-dropdown>
<input type="hidden" {($value)}="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
API
Attributes:
semantic-popover
- main attribute to invoke the wrapper
Contributing
Pull requests are welcome.