polymer_app_layout_templates

Dart version of https://github.com/PolymerElements/app-layout-templates + routing

Application Layout Templates (Dart)

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

Application Layout Templates Viewer

Templates:

Left Nav + View

Left Nav + Card Feed

Left Nav + List + Detail

List Left + Card over Extended Header

Usage

Use polymer_route_behavior to implement routing.

Available for: - Left Nav + View - List Left + Card over Extended Header - Layout Nav Header

Example:

awesome_polymer_element.dart:

import 'package:polymer_route_behavior/polymer_route_behavior.dart';

...
pages = [
            new Page("Home", "home", "home-page", isDefault: true),
            new Page("One", "one", "page-one"),
            new Page("Two", "two", "page-two", menu: false)
        ];
...

awesome_polymer_element.html:

<layout-nav-header pages='{{pages}}'></layout-list-card-over>

The element field accept any HtmlElement.

Working example

Next Step

  • Define and pass parameter in path url
  • Add sub path

Libraries

polymer_app_layout.device_layout_viewer

Created by lejard_h on 08/10/15.

polymer_app_layout.layout_device_view

Created by lejard_h on 08/10/15.

polymer_app_layout.layout_list_card_over

Created by lejard_h on 08/10/15.

polymer_app_layout.layout_nav_cards

Created by lejard_h on 08/10/15.

polymer_app_layout.layout_nav_header

Created by lejard_h on 08/10/15.

polymer_app_layout.layout_nav_list_detail

Created by lejard_h on 08/10/15.

polymer_app_layout.layout_nav_view

Created by lejard_h on 08/10/15.