Полимерная бумага-подсказка - PullRequest
Новая
       9

Полимерная бумага-подсказка

0 голосов
/ 04 июля 2018

Мне нужно изучить Polymer.js для проекта, на который я был назначен, и я пытаюсь сделать несколько уроков.

Я пытаюсь использовать элемент paper-tooltip и создал следующий код, но по какой-то причине всплывающая подсказка появляется, но текст не виден.

К вашему сведению: они все еще используют Polymer 2.0, и я не могу изменить этот атм.

Кто-нибудь, кто может обнаружить мою ошибку? 

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">

<dom-module id="app-root">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]!</h2>

    <div>
      <button id="btn">Click me!</button>
      <paper-tooltip for="btn" position="bottom">
        Tooltip!!
      </paper-tooltip>
    </div>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class AppRoot extends Polymer.Element {
      static get is() { return 'app-root'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'app-root'
          }
        };
      }
    }

    window.customElements.define(AppRoot.is, AppRoot);
  </script>
</dom-module>

index.html 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>Polymer Test Environment</title>
    <meta name="description" content="Polymer Test">

    <link rel="manifest" href="/manifest.json">

    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html">

    <link rel="import" href="/src/app-root/app-root.html">

    <style>
      body {
        height: 100vh
      }
    </style>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 10 июля 2018

У меня нет проблем с запуском вашего кода. Приложение отображается с кнопкой и всплывающей подсказкой.

Несколько советов:

  • Не импортировать polymer.html в index.html. Если хотите, сделайте это в импорте компонентов.
  • Будьте осторожны с URL-адресом, который вы импортируете. / в первую очередь станет абсолютным путем (что делает его импортируемым из корня).
  • Используйте webcomponents-lite.js вместо webcomponents-loader.js. Единственный случай webcomponents-loader.js имеет значение, когда он используется с async. В противном случае просто загрузите все полифилы.

Вот рабочий проект, который я загрузил на Github. Я не уверен, как вы это структурируете, поэтому я просто включаю их во все корневые папки. Я только изменил коды импорта, все остальное остается прежним.

https://github.com/binhbbbb/app-root

0 голосов
/ 04 июля 2018

Это не проблема в этой части кода. Потому что, если я запускаю его, я просто получаю всплывающую подсказку при наведении курсора на кнопку (код ниже можно запустить только в Chrome)

screenshot

<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0/lib/">

<script src="webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-tooltip/paper-tooltip.html">

<dom-module id="app-root">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]!</h2>

    <div>
      <button id="btn">Click me!</button>
      <paper-tooltip for="btn" position="bottom">
        Tooltip!!
      </paper-tooltip>
    </div>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class AppRoot extends Polymer.Element {
      static get is() {
        return 'app-root';
      }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'app-root'
          }
        };
      }
    }

    window.customElements.define(AppRoot.is, AppRoot);
  </script>
</dom-module>

<app-root></app-root>
...