Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prawee/meteor-metro-ui2
Metro UI CSS 2.x packaged for Meteor
https://github.com/prawee/meteor-metro-ui2
meteor metro-ui
Last synced: about 18 hours ago
JSON representation
Metro UI CSS 2.x packaged for Meteor
- Host: GitHub
- URL: https://github.com/prawee/meteor-metro-ui2
- Owner: prawee
- License: mit
- Created: 2015-04-17T04:40:08.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2014-11-25T18:24:06.000Z (almost 10 years ago)
- Last Synced: 2023-06-17T12:01:24.942Z (over 1 year ago)
- Topics: meteor, metro-ui
- Language: JavaScript
- Size: 813 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: history.md
- License: license.md
Awesome Lists containing this project
README
# metro-ui2
[Metro UI CSS 2](http://metroui.org.ua/) packaged for [MeteorJS](http://meteor.com).
## Current Version
**v2.0.32_3**
## Usage
For the most part, once installed, you can use the markup samples provided
on the [Metro UI CSS 2](http://metroui.org.ua/) website. Make sure that you wrap
your markup in an outer DIV tag with the appropriate class tag (see below).
```
{{> template}}
```
The dynamic behavior for the Metro UI components (like drop-downs) needs to be initialized
in the Meteor template render method to work correctly. The following demonstrates how
to initialize all components for the entire page using the default body template in Meteor.
```
UI.body.rendered = function() {
$.Metro.initAll();
}
```
This however would not be very performant. Each of the initialization methods can
be passed a jQuery selector to limit the scope of DOM elements that will be traversed. I recommend
wrapping each of your templates in an outer container with an ID that matches the template name. This
makes it easy to initialize only the components used within that template being rendered:
```
Template.header.rendered = function() {
$.Metro.initAll("#header");
}
```
This still however runs more code than required. Although it requires some extra work, initializing
only the components being used in a particular template is the most performant, and recommended method:
```
Template.header.rendered = function() {
$.Metro.initDropdowns("#header");
$.Metro.initButtonSets("#header");
}
```
The following is the complete list of initialization methods. These methods can be found in the **metro-initiator.js**
source file included in the Metro UI download.
- $.Metro.initAccordions(area);
- $.Metro.initButtonSets(area);
- $.Metro.initCalendars(area);
- $.Metro.initCarousels(area);
- $.Metro.initCountdowns(area);
- $.Metro.initDatepickers(area);
- $.Metro.initDropdowns(area);
- $.Metro.initFluentMenus(area);
- $.Metro.initHints(area);
- $.Metro.initInputs(area);
- $.Metro.transformInputs(area);
- $.Metro.initListViews(area);
- $.Metro.initLives(area);
- $.Metro.initProgreeBars(area);
- $.Metro.initRatings(area);
- $.Metro.initScrolls(area);
- $.Metro.initSliders(area);
- $.Metro.initTabs(area);
- $.Metro.initTimes(area);
- $.Metro.initTrees(area);
- $.Metro.initSteppers(area);
- $.Metro.initStreamers(area);
- $.Metro.initDragTiles(area);
- $.Metro.initPulls(area);
- $.Metro.initPanels(area);
- $.Metro.initTileTransform(area);
## License
[The MIT License (MIT)](license.md)