Question

我对聚合物，材料和网络组件非常陌生

我使用Polymer CLI创建聚合物2应用程序

polymer init

然后我选择了 polymer-2-starter-kit

我尝试在我的view1文件中添加一些paper buttons，但我发现纸质按钮没有添加到bower依赖项中，所以我自己添加了它。我的bower.json看起来像这样：

＆＃13;

    {
  "name": "my-app",
  "authors": [
    "Ehsun"
  ],
  "license": "",
  "dependencies": {
    "app-layout": "PolymerElements/app-layout#2.0-preview",
    "app-route": "PolymerElements/app-route#2.0-preview",
    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
    "iron-icon": "PolymerElements/iron-icon#2.0-preview",
    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#2.0-preview",
    "iron-localstorage": "PolymerElements/iron-localstorage#2.0-preview",
    "iron-media-query": "PolymerElements/iron-media-query#2.0-preview",
    "iron-pages": "PolymerElements/iron-pages#2.0-preview",
    "iron-selector": "PolymerElements/iron-selector#2.0-preview",
    "paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
    "polymer": "Polymer/polymer#^2.0.0-rc.1",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1",
    "paper-button": "PolymerElements/paper-button#1.0.14"
        
  },
  "devDependencies": {
    "web-component-tester": "6.0.0-prerelease.5"
  },
  "private": true
}

＆＃13;

我将标记添加到我的一个视图中：

＆＃13;

    <!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer-element.html">
s<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="shared-styles.html">



<dom-module id="my-view1">
    <template>
        <style include="shared-styles">
            :host {
                display: block;

                padding: 10px;
            }
        </style>

        <div class="card pink" >
            <h1>Start Now</h1>
            <a href="/view2"><paper-button raised class="indigo">go</paper-button></a>
        </div>


        <paper-button class="pink">link</paper-button>
        <paper-button raised class="indigo">raised</paper-button>
        <paper-button toggles raised class="green">toggles</paper-button>
        <paper-button disabled class="disabled">disabled</paper-button>
    </template>


    <script>
        class MyView1 extends Polymer.Element {
            static get is() {
                return 'my-view1';
            }
        }

        window.customElements.define(MyView1.is, MyView1);
    </script>
</dom-module>

＆＃13;

现在这些按钮是无文字的：

Answer 1

我可以看到您使用1.0.14 paper-button标记。这与Polymer的v2.x不兼容，因为聚合物V2.x在v1规格的web组件上，paper-button v1.x在v0上。

您的文字未出现的具体原因应该是弃用content代码，转而使用v1规范中的slot代码。

您应该尝试2.0-preview的{{1}}分支/标记。

Polymer 2 app：paper-button没有文字

1 个答案: