Корневой элемент тени Dart Polymer Styling с CSS

Я пытаюсь создать корневой элемент полимерного элемента с помощью css. Возьмем, к примеру, встречный щелчок. Если у меня есть полимерный элемент в моем основном html, и я хочу задать ему размер (скажем, ширину и высоту). Я пытаюсь использовать глобальный css в своем основном html, например

click-counter{
width:100px;
height:100px;
}

Это не работает.

Я также попытался создать стиль внутри полимерного элемента, например

<polymer-element name="click-counter" attributes="count">
  <template>
    <style>
      @host{
        click-counter {
          width:100px;
          height:100px;
        }
      }
      ...

Это тоже не работает. Кто-нибудь знает, как я буду стилизовать элемент с помощью css? (у меня дартс 0.8.1.2)

Спасибо, Йи


dart css dart-polymer
person yi chen    schedule 10.10.2013    source источник
comment
Я думаю, вам нужно использовать атрибут apply-author-styles, [это] [1] ссылается на [1]: stackoverflow.com/questions/18261596/   -  person user2685314    schedule 11.10.2013
comment
Я тоже попробовал атрибут, но он тоже не работает.   -  person yi chen    schedule 11.10.2013

Ответы (2)


arrow_upward
2
arrow_downward

Счетчик кликов состоит из кнопки и ввода текста. Нет div, который держит 2 вместе. Итак, если вы устанавливаете ширину и высоту компонента, что вы на самом деле устанавливаете?

<polymer-element name="click-counter">
  <template>
    <button on-click="increment">Click Me</button>
    <p>You clicked the button {{count}} times.</p>
  </template>
  <script type="application/dart" src="click_counter.dart"></script>
</polymer-element>

В случае, если будет div, обертывающий кнопку и ввод текста, вы можете установить ширину div в компоненте следующим образом:

<polymer-element name="click-counter">
  <template>
  <style type="text/css">
      div{
        width:100px;
        border-style:solid;
        background-color: #FF9900;
        font-weight: bold;
      }
    </style>
    <div>
      <button on-click="increment">Click Me</button>
      <p>You clicked the button {{count}} times.</p>
    </div>
  </template>
  <script type="application/dart" src="click_counter.dart"></script>
</polymer-element>

Вы также можете объявить стиль div в индексном файле, но тогда вам нужно установить applyAuthorStyles в true для компонента.

@CustomTag('click-counter')
class ClickCounterElement extends PolymerElement with ObservableMixin {
  @observable int count = 0;

  get applyAuthorStyles => true;

  void increment(Event e, var detail, Node target) {
    count += 1;
  }
}

Однако это повлияет на все элементы div на странице. Я не уверен, как бы вы выбрали только корневой div в компоненте счетчика кликов.

person Christophe Herreman    schedule 11.10.2013

arrow_upward
1
arrow_downward

Это то, что вы хотите сделать?

  @host {
    :scope {
       ...
    }
  }

См. этот раздел руководства: Стили пользовательского элемента

person Greg Lowe    schedule 31.10.2013