JavaScript
Need help with blaze-layout?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
kadirahq

Description

Layout Manager for Blaze (works well with Meteor FlowRouter)

203 Stars 49 Forks MIT License 50 Commits 31 Opened issues

Services available

Need anything else?

BlazeLayout (kadira:blaze-layout) Build Status

This project is earlier known as meteorhacks:flow-layout. This is an exact copy of FlowLayout but in a different name.

Blaze Layout Manager for Meteor

This is a layout manager designed for Blaze. This is built to use with FlowRouter but, this can be used without FlowRouter too. This is a very simple layout manager. It will does following:

  • Allow you to render a layout template to the UI
  • Allow you to pass data to the layout
  • Only re-render when necessary parts of the layout
  • Can be used with multiple layouts

Usage

First install BlazeLayout with:

meteor add kadira:blaze-layout

Then create following few templates





Now you can render the layout with:

BlazeLayout.render('layout1', { top: "header", main: "postList" });

Then you will get output like below:

  

This is the header

This is the postList area.

Sometimes later, you can render the layout again:

BlazeLayout.render('layout1', { top: "header", main: "singlePost" });

Since only the

main
is changed,
top
section won't get re-rendered. Here's the HTML you'll get:
  

This is the header

This is the singlePost area.

Rendering Multiple Templates

Likewise you can create multiple templates and switch between each other. But when you are changing the layout, whole UI will get re-rendered again.

So, it's a good idea to use a few layouts if possible.

Set Different Root Node

By default, BlazeLayout render layouts into a DOM element with the id

__blaze-root
. Sometimes, you may need to change it or just render layouts into the body. If so, here's how to do it.

Add following code inside on the top of one of your client side JS file:

BlazeLayout.setRoot('body');

You can set any CSS selector, DOM Node, or jQuery object as the root.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.