Как я могу скрыть пользовательский элемент Polymer?

Для экспериментов я использую пользовательский элемент tute-stopwatch с сайта https://www.dartlang.org/docs/tutorials/polymer-intro/

Когда я устанавливаю атрибут '.hidden = true' для кнопок, эти кнопки успешно скрываются, а элемент tute-stopwatch — нет.

  void addChild(Event e, var detail, Node target) {
    ..
    stopButton.hidden = true;
    startButton.hidden = true;
    resetButton.hidden = true;

    this.hidden = true; 
}

Когда я использую подшаблон в tute_stop_watch.html:

<template if="{{ visible }}" id="innerTemplate">

и в tute_stop_watch.dart:

  void enteredView() {
    super.enteredView();
    startButton = $['startButton']; // $['startButton'] == null
    innerTemplate =$['innerTemplate'] // find correct, but innerTemplate.childNodes == []

Я пытаюсь сделать элемент со всеми способностями tute-stopwatch видимым по требованию.


dart dart-polymer
person user3103137    schedule 28.12.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Добавьте к полимерным элементам следующий стиль:

<polymer-element name="tute-stopwatch">
  <template>
    <style>
      /* old style for current Dartium */
      @host {
        * {
          display: inline-block;
          position: relative;
          overflow: hidden;
        }

        [hidden], .hidden {
          display: none;
        }
      }

      /* new style for Chromium */
      :host {
        display: inline-block;
        position: relative;
        overflow: hidden;
      }

      :host([hidden]:host, .hidden:host) {
        display: none;
      }
    </style>

    <button>xxx</button>
    ...

  <template>
  <script type="application/dart" src='toute-stopwatch.dart'></script>
</polymer-element>

Вы можете сделать элемент видимым/скрытым, установив атрибут hidden или добавив/удалив класс hidden.

person Günter Zöchbauer    schedule 29.12.2013
comment
Благодарю вас ! this.hidden работает после этой магии. Где я могу узнать больше о :host([hidden]:host, .hidden:host), и это работает только в Chromium? - person user3103137; 29.12.2013
comment
Dartium немного отстает, но скоро старый стиль будет заменен. Подробнее об этом можно узнать в этом Руководстве по оформлению элементов или Polymer-Elements. Однако есть еще много элементов, не начинающихся с «polymer_ui». - person Günter Zöchbauer; 29.12.2013
comment
Спасибо за помощь. С Новым Годом ! - person user3103137; 31.12.2013
comment
Гюнтер, что означает твой селектор? Что такое [hidden]:host и .hidden:host .... это не работает с :hover#myElement, поэтому мне любопытно, что делает ваша реализация, можете ли вы показать jsfiddle? - person neaumusic; 29.02.2016
comment
Мм, это 2 года, я не могу вспомнить, я когда-либо знал об этом. Вероятно, какой-то экспериментальный селектор был удален) Я думаю, это было то, что :host-context (html5rocks.com/en/tutorials/webcomponents/shadowdom-201/) сейчас. - person Günter Zöchbauer; 29.02.2016

arrow_upward
1
arrow_downward

Вы можете скрыть весь шаблон:

<template>
    <template if="{{ visible }}">
     CONTENT
    </template>
</template>

Где visibleявляется @published логическим значением.

И тогда у вас может быть метод в дротике, например:

void hide() {
    visible = false;
}

Который вы могли бы вызвать с помощью ссылки по клику в HTML.

person Paul Collingwood    schedule 28.12.2013
comment
Благодарю вас! Это работает. Но когда я использую подшаблон ‹template if={{ visible }}› - person user3103137; 29.12.2013
comment
Кажется, вы помещаете код дротика внутрь шаблона? Возможно, вам следует разделить это на два вопроса сейчас? - person Paul Collingwood; 29.12.2013
comment
Извини. Это мой первый вопрос здесь. Я добавляю код дротика в tute_stop_watch.dart - person user3103137; 29.12.2013
comment
Спасибо за помощь. С Новым Годом ! - person user3103137; 31.12.2013