I'm currently using the app-layout elements (Version 0.10.4), specifically app-toolbar.
When creating a div with the "main-title" attribute tied to it, it does not "work." I'm not exactly sure, if it might be what I imported.
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/app-layout/app-layout.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
or it could possibly be that I'm using app-toolbar wrong.
<body>
<app-header-layout>
<app-header effects="waterfall" reveals>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
</app-toolbar>
</app-header>
<main>
</main>
</app-header-layout>
</body>
All feedback is appreciated, thanks!
Your imports look correct to me. Given that the docs don't fully describe what main-title does, it's possible that you're assuming the wrong behavior for the attribute. Note that main-title expands the title's width across the toolbar. See the demos below.
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="app-layout/app-layout.html">
</head>
<body>
<style is="custom-style">
app-toolbar {
background-color: #4285f4;
color: white;
margin-bottom: 10px;
}
.my-title {
border: solid 1px red;
}
</style>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div class="my-title" main-title>With <code>main-title</code></div>
<paper-icon-button icon="account-circle"></paper-icon-button>
</app-toolbar>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div class="my-title">Without <code>main-title</code></div>
<paper-icon-button icon="account-circle"></paper-icon-button>
</app-toolbar>
</body>