Skip to content

Repository files navigation

Meteor Webcomponents Layout.

![Gitter](https://badges.gitter.im/Join Chat.svg)

Installation

Using meteor package. Meteor 1.3+. Depends on synthesis

meteor add mwc:layout

Using Bower

bower install mwc-layout --save
<linkrel="import" href="bower_components/mwc-layout/mwc-layout.html">

Note. Version 1.1.12 is for meteor 1.3+ . For meteor 1.2 use mwc-layout bower components

Usage

index.html

<head><title>Synthesis</title></head><bodyclass="fullbleed"><mwc-layoutid="demo-layout"><divregion="main"></div></mwc-layout></body>

Define a polymer element

<dom-moduleid="test-element"><template>
name : {{name}}
</template></dom-module><script>Polymer({is:"test-element",properties:{name:{type:String,value:"mwc"}}})</script>

Now use

mwcLayout.render(layout,opt,rerender);// layout[String]// opt[Object] one-level deep// rerender[Boolean]
mwcLayout.render("demo-layout",{"main":"test-element"});

forceRender

In mwc:layout we dont re render the layout unless the new layout is not equal to the current layout or forceRender argument is set. This is to prevent unwanted rerendering while changing routes(even if you change a param/queryparam the route gets rerun so does the render function written inside FlowRouter action). forceRender comes in handy when you have to change the rendering while keeping the current layout.

<!-- client/main.html -->
...
<mwc-layoutid="demo-landing"><divregion="header"></div><divregion="main"></div></mwc-layout>
...
// imports/startup/client/router.js
...
action:function(params,queryParams){mwcLayout.render("demo-landing",{"main":"test-layout1","header":"test-header"});}...

Now if you try mwcLayout.render("demo-landing",{"main":"test-layout2","header":"test-header"}) from console it wont work since layout is not changed and forceRender is not set.

This works-> mwcLayout.render("demo-landing",{"main":"test-layout","header":"test-header"},true);

Links

Layout Manager for Meteor + Polymer - 1.0

Advanced Example - https://github.com/HedCET/TorrentAlert

About

✈️ polymer layout renderer

Resources

Stars

5 stars

Watchers

2 watching

Forks

Releases

Packages

Used by

Contributors

Languages