1

css でポリマー要素のルート要素のスタイルを設定しようとしています。カウンタークリックを例にとってみましょう。メインの html にポリマー要素があり、それにサイズ (幅と高さなど) を指定したい場合、メインの html で次のようにグローバル css を使用しようとします。

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を使用しています）

ありがとう、イー

4

2 に答える 2

2

クリックカウンターは、ボタンとテキスト入力で構成されています。2つをまとめるdivはありません。コンポーネントの幅と高さを設定している場合、実際には何を設定しているのでしょうか?

<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 のみを選択する方法がわかりません。

于 2013-10-11T06:41:57.847 に答える
1

これはあなたがやりたいことですか？

  @host {
    :scope {
       ...
    }
  }

チュートリアルのこのセクションを参照してください:カスタム要素のスタイリング

于 2013-10-31T02:16:40.440 に答える