semantic-ui-popup-canjs
v0.0.2
Published
CanJS wrapper around SemanticUI Popup
Downloads
5
Readme
semantic-ui-popup-canjs
CanJS wrapper around SemanticUI Popup component
A can.view.attr wrapper around SemanticUI popup. 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.
This wrapper allows you to use SemanticUI popup with just html, no need to run jQuery plugin yourself.
SemanticUI's CSS should be imported separately. You can use semantic-ui-less
package as in this demo.
Settings of the popup can be defined as "semantic"-prefixed attributes. E.g. to define position
as bottom left
you can add semantic-position="bottom left"
attribute (see Usage section).
If you need to use SemanticUI Popup callbacks
then you are probably a jQuery-style guy and you don't need this wrapper :)
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-popup-canjs --save
Usage
With default settings:
<div class="ui icon button" semantic-popup data-content="Add users to your feed">Add</div>
With custom settings:
<a class="browse" semantic-popup
semantic-inline="true"
semantic-on="click"
semantic-position="bottom left">Button</a>
API
Attributes:
semantic-popup
- main attribute to invoke the wrappersemantic-*
- use any of SemanticUI Popup settings with this prefix. E.g.semantic-position="bottom left"
orsemantic-hoverable="true"
.
Contributing
Pull requests are welcome.