ractive-dropdown
v1.1.1
Published
A component for ractive that can display any generic content in a dropdown on click or hover.
Downloads
5
Readme
ractive-dropdown
A ractive component to disable child elements in a dropdown on click or hover.
If you are looking for a <select>
-like component check out ractive-select
.
If you are looking for the original ractive-dropdown
refer to alexserver/ractive-dropdown.
Demo
Install
npm install ractive-dropdown --save
Usage
Add the dropdown to your Ractive instance:
Ractive.extend({
...
components: {
dropdown: require('ractive-dropdown')
},
...
});
Use it.
<dropdown>
<button>Show dropdown</button>
<div class='dropdown'>
Dropdown content goes here.
</div>
</dropdown>
The component looks for an element with the .dropdown
class between the component tags and hoists it to a container that is added to the body.
Everything else in the component becomes the hitarea to open/close the dropdown
The dropdown is then positioned below the hitarea (TODO more positions?)
Attributes
mode
Set to hover
to show/hide the dropdown on hover instead of click. Default: click
.