https://github.com/meteorwebcomponents/layout

:airplane: polymer layout renderer
https://github.com/meteorwebcomponents/layout

Last synced: 5 days ago
JSON representation

:airplane: polymer layout renderer

• Host: GitHub
• URL: https://github.com/meteorwebcomponents/layout
• Owner: meteorwebcomponents
• License: mit
• Created: 2015-11-13T14:50:31.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-07T04:58:57.000Z (almost 8 years ago)
• Last Synced: 2025-01-01T07:15:14.714Z (22 days ago)
• Language: HTML
• Homepage: http://bower.io/search/?q=mwc-layout
• Size: 23.4 KB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# Meteor Webcomponents Layout.

[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/aruntk/meteorwebcomponents?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

## Installation

### Using meteor package. Meteor 1.3+. Depends on [synthesis](https://github.com/meteorwebcomponents/synthesis)

```sh

meteor add mwc:layout

```

### Using Bower

```sh

bower install mwc-layout --save

```

```html

```

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

## Usage

index.html

```html

  Synthesis

  

    


  


```

Define a polymer element

```html

  

        name : {{name}}

  

Polymer({

  is:"test-element",

  properties:{

    name:{

      type:String,

      value:"mwc"

    }

  }

})

```

Now use  

```js

mwcLayout.render(layout, opt, rerender);

// layout[String]

// opt[Object] one-level deep

// rerender[Boolean]

```

```js 

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. 

```html

...

      


      


...

```

```js

// 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](https://www.meteor.com/) + [Polymer - 1.0](https://www.polymer-project.org/) 

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