polymer_app_layout_templates

Polymer application template with responsive Material Design and routing

Use the application layout templates provided and start building responsive applications.

Usage

Use polymer_route_behavior to implement routing.

awesome_polymer_element.dart:

import 'package:polymer_app_layout_template/app_layout.dart'';

...

// route
@property
List<Page> get pages => [
    new Page("Home", "home", "home-page", isDefault: true),
    new Page("One", "one", "page-one"),
    new Page("Two", "two", "page-two", menu: false)
];

...

// toolbar
@property
List get toolbarItems => [
    'toolbar-more-button' // or document.createElement('toolbar-more-button');
];

...

@Listen(PolymerRouteBehavior.page_changed_event)
pageChanged(CustomEventWrapper e, [_]) {
    print("page changed => ${(e.detail as Page)}");
}

@Listen(PolymerRouteBehavior.path_changed_event)
pathChanged(CustomEventWrapper e, [_]) {
    print("path changed => ${e.detail}");
}

gotToHome() {
    PolymerRouteBehavior.goToDefault();
}

gotToPage(String pageName) {
    PolymerRouteBehavior.goToName(pageName);
}

...

awesome_polymer_element.html:

 <layout-app pages="{{pages}}" toolbar-items="{{toolbarItems}}" layout-type="layout-nav-header"></layout-app>

The element field accept any HtmlElement.

Working example

Templates:

Left Nav + View

List Left + Card over Extended Header

Next Step

  • Define and pass parameter in path url

Libraries

polymer_app_layout

Created by lejard_h on 18/10/15.

polymer_app_layout.behaviors

Created by lejard_h on 09/11/15.

polymer_app_layout.behaviors.icon_behavior

Created by lejard_h on 18/10/15.

polymer_app_layout.behaviors.left_nav_behavior

Created by lejard_h on 18/10/15.

polymer_app_layout.behaviors.route_behavior

Created by lejard_h on 11/10/15.

polymer_app_layout.behaviors.toolbar_behavior

Created by lejard_h on 18/10/15.

polymer_app_layout.elements

Created by lejard_h on 09/11/15.

polymer_app_layout.elements.layout_app

Created by lejard_h on 08/10/15.

polymer_app_layout.elements.layout_list_card_over

Created by lejard_h on 08/10/15.

polymer_app_layout.elements.layout_nav_header

Created by lejard_h on 08/10/15.

polymer_app_layout.elements.layout_nav_view

Created by lejard_h on 08/10/15.

polymer_app_layout.models
polymer_app_layout.models.app_page
polymer_app_layout.models.page