Realy fully customizable, and reactive drops, dropdowns, tooltips and dropmenus for Meteor.
meteor add templ:drop
new Drop(data: Data)
Class of one drop. Building automatically in the template Template.Drop.
String = 'DropDefault'
Default theme.
String = 'DropDefaultTemplate'
Default template.
drop.tick(data: Data)
It recalculates the position of drop, and merge old data with new data.
drop.show(data: Data)
It shows drop if hidden, and merge old data with new data.
drop.hide()
It hides drop if shown.
drop.trigger(name: String) => Drop.Trigger
Construct and return trigger by name of trigger in Drop.triggers
object.
drop.generateInstance()
Generate instance.
Drop custom variables and drop options context.
System variables:
anchor: DOMELement
required link to anchor (automatically on template usage)trigger: String
the trigger is activated automatically only when using Template.Droptemplate?: String = 'DropDefaultTemplate'
template of this dropcontent?: Template
template passed into template with Template.Drop{{else}}
blocktheme?: String = 'DropDefault'
theme template of this dropplacement?: String = 'global'
placement drop into body root element or into called Template.Dropslocation?: 'outside'|'inside'
visual location relative dropdirection?: 'top'|'right'|'bottom'|'left' = 'top'
direction of dropposition?: Number = 0.5
0-1alignment?: Number = 0.5
0-1layer?: Number = 9999
z-index of drop
Mongo.Collection
Local collection with drop instances.
It is not recommended to make changes.
Mongo.Collection
Local collection with graph of drop nesting.
It is not recommended to make changes.
new Drop.triggers.toggle(drop: Drop)
Anchor click to toggle drop.
new Drop.triggers.tooltip(drop: Drop)
Anchor hover.
new Drop.triggers.dropmenu(drop: Drop)
Anchor and drop hover.
new Drop.triggers.dropdown(drop: Drop)
Anchor click to show, outside click to hide.
new Drop.triggers.popover(drop: Drop)
Anchor click to show, everywhere click to hide.
Template for easy automatic drop assembly.
Inside, must be one root tag!
It takes as arguments Data object with anchor key.
{{#Drop template='example'}}
<button>anchor</button>
{{/Drop}}
As the {{else}}
block can be passed content
template variable.
{{#Drop template='example'}}
<button>anchor</button>
{{else}}
custom content
{{/Drop}}
It allows you to create an area for drops rendering.
{{>Drops placement='myPlacement'}}
{{#Drop template='example' placement='myPlacement'}}
<button>anchor</button>
{{/Drop}}
Standard independent theme
template of drop.
The theme
template uses Bootstrap classes.
Microtemplate for fast create close buttons.
{{#DropHide instance}}
<button class="btn btn-danger btn-xs">x</button>
{{/DropHide}}
- Remove
check
- No timeouts and intervals!
- [https://github.com/meteor-templ/drop/issues/15](Close microtemplate)
- [https://github.com/meteor-templ/drop/issues/13](Arrow control)
- [https://github.com/meteor-templ/drop/issues/12](Positioning within the theme)
calc
renamed togenerateInstance
- Fix
hover
- Fix data bag
- New objective syntax
- New reactive logic
- New position-alignment logic
- New location logic
- New placement logic
- Different API
Drop.init
- Dimentum
- Many fixes...
dropdown
andpopover
triggers.
DropThemeBootstrap
template