Ваадин 10 слот в ваадин-диалоге - PullRequest
Новая
       17

Ваадин 10 слот в ваадин-диалоге

0 голосов
/ 27 августа 2018

Я хочу создать повторно используемый диалог в Vaadin 10. Поэтому я подумал об использовании тега в vaadin-dialog. Я создал HTML-файл, содержащий шаблонный диалог vaadin. 

<dom-module id="show-sera-dialog">
<template>
    <vaadin-dialog opened="opened">
        <sera-field></sera-field>
        <slot></slot>
    </vaadin-dialog>
<template>
</dom-module>

И я пытаюсь использовать это так. 

<show-sera-dialog opened="{{showSera}}">
        It worked!
</show-sera-dialog>

Откроется диалоговое окно и отобразится поле сыворотки, но текст никогда не отображается. Есть ли ошибка в этих строках? Я неправильно использую vaadin-диалог?

PS:

Работает с этой кнопкой: 

<dom-module id="one-shot-button">
<template>
    <vaadin-button on-click="_disable" theme="raised primary" disabled={{disabled}}>
        <slot></slot>
    </vaadin-button>
</template>

<script>
    class OneShotButton extends I18nMixin(Polymer.Element) {
        static get is() {
            return 'one-shot-button'
        }

        static get properties() {
            return {
                disabled: {type: Boolean, notify: true}
            }
        }

        _disable() {
            this.disabled = true;
            this.onClick();
        }
    }

    customElements.define(OneShotButton.is, OneShotButton);
</script>

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

Один из способов создания многократно используемого диалога - создать такой компонент, как этот 

<dom-module id="show-sera-dialog">
    <template>
        <vaadin-dialog opened={{opened}}>
            <template>
                [[text]]
            </template>
        </vaadin-dialog>
    </template>
    <script>
        class ShowSeraDialog extends Polymer.Element {
            static get is() { return 'show-sera-dialog'; }
            static get properties() { 
                return  { 
                    "text" : String, 
                    "opened" : Boolean
                }
            }
        }

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

И использовать его вот так 

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="./show-sera-dialog.html">

<dom-module id="polymer-test-app">
  <template>
    <show-sera-dialog id="dialog1" text="It worked!"></show-sera-dialog>
    <button on-click="showDialog">Show dialog</button>
  </template>

  <script>
    class PolymerTestApp extends Polymer.Element {
      static get is() { return 'polymer-test-app'; }

      showDialog() {
        this.$.dialog1.opened = true;
      }
    }

    window.customElements.define(PolymerTestApp.is, PolymerTestApp);
  </script>
</dom-module>
0 голосов
/ 27 августа 2018

Вы помещаете <slot> внутрь <template>. Шаблон означает, что веб-компонент будет делать все, что ему нужно при рендеринге, например, путем создания нескольких экземпляров, таких как ячейки в сетке и т. д. В этом случае vaadin-dialog телепортирует контент в тело, чтобы избежать любого контекста стека. Таким образом, слоты не работают, потому что они не находятся в одной иерархии DOM.

...