Giter VIP home page Giter VIP logo

polymer_app_layout_templates's Introduction

Migrating to polymer_app

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

Define pages routing

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

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

<layout-app 
    pages="{{pages}}" 
    layout-type="layout-nav-view">
</layout-app>

Navigate

gotToHome() {
    LayoutApp.goToDefaultRoute();
}

gotToPage(String pageName) {
    LayoutApp.goToRouteName(pageName);
}

Listen route change

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

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

Define Toolbar, nav-header, nav-footer

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

// header
@property
HtmlElement get header => document.createElement("nav-header");

//footer
@property
String get footer => "nav-footer"
   

<layout-app 
    pages="{{pages}}" 
    toolbar-items="{{toolbarItems}}" 
    layout-type="layout-nav-header" 
    nav-header="{{header}}" 
    nav-footer="{{footer}}">
</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

polymer_app_layout_templates's People

Contributors

lejard-h avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

meflyup easonpai

polymer_app_layout_templates's Issues

Exception from PolymerIncludeElement

Once when I switch page from Home to One,

path changed => home
page changed => { name: Home, path: home, element: home-page, isDefault: true, menu: true, hideLeftNav: false, icon: null}

I get this exception. And page of One cannot be render onto screen as well.
How do you solve this problem?

Uncaught Unhandled exception:
type 'PolymerDom' is not a subtype of type 'HtmlElement' of 'function result'.
#0      PolymerIncludeElement.rootElement (package:polymer_include_element/polymer_include_element.dart:17:44)
#1      PolymerIncludeElement.element= (package:polymer_include_element/polymer_include_element.dart:27:24)
#2      _data.<anonymous closure> (http://localhost:63342/polymer-lab/web/index.bootstrap.initialize.dart:52:46056)
#3      _InstanceMirrorImpl.invokeSetter (package:reflectable/src/reflectable_transformer_based.dart:203:20)
#4      _setUpPropertyChanged.<anonymous closure> (package:polymer/init.dart:71:24)
  Polymer.Async._atEndOfMicrotask   
  window.MutationObserver.observe.characterData 

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.