main-title for <app-toolbar> 工作不正常？

Question

我目前正在使用 app-layout 元素（版本 0.10.4），特别是 app-toolbar。

当创建一个 div 并绑定了 "main-title" 属性时，它不会 "work." 我不确定它是否是我导入的。

<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">

或者可能是我用错了app-toolbar。

<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>

感谢所有反馈，谢谢！

Answer 1

我认为你的导入是正确的。鉴于 docs 没有完全描述 main-title 的作用，您可能假设该属性的行为是错误的。请注意，main-title 扩展了标题在工具栏上的宽度。请参阅下面的演示。

<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>

main-title for <app-toolbar> 工作不正常？

main-title for <app-toolbar> not working properly?

polymer

material-design

polymer-1.0

web-component

google-web-component