1

私は理解しようとしていますcore-style。これまでに見たすべての例で、 Button などの要素のみが a で参照されていることに気付きました。core-styleクラス参照 ( など.blue) はありません。にクラス参照を配置しようとしましたcore-styleが、レンダリングされません。以下の例を参照してください

.html 

    <link href='../../../../packages/polymer/polymer.html' rel='import' >
    <link href='../../../../packages/core_elements/core_style.html' rel='import' >

    <polymer-element name='blue-theme'>

      <template>
        <core-style id='blue-theme'>
            :host {
                background-color: red;

                .lb-container1 {
                   background-color: {{lb50}};
                   padding-top: 5px;
                 padding-bottom: 5px;
                 width: {{width}}
                }   
          }

        </core-style>
      </template>

      <script type='application/dart' src='blue_theme.dart'></script>
    </polymer-element>

ダーツ

import 'package:polymer/polymer.dart';

import 'package:epimss_shared/epimss_shared_client.dart' hide DataEvent;

@CustomTag( 'blue-theme' )
class BlueTheme extends PolymerElement
{
  String topic = '';

  @observable String lb50 = LightBlue['50'];
  @observable String lb100 = LightBlue['100'];
  @observable String lb200 = LightBlue['200'];

  BlueTheme.created() : super.created();

  @published
  String get width => readValue( #width );
  set width(String value) => writeValue( #width, value );

  @override
  void attached()
  {
     super.attached();
     topic = this.dataset['topic'];

  }
}

上記のコードはレンダリングされません。

ありがとう

4

1 に答える 1

0

プロデューサーのみを作成しました<core-style>(再利用可能なスタイルを提供します)。また、必要なのは<core-style>消費者です。

<core-style ref="blue-theme"></core-style>

私自身は使用していませんが、この行を追加するだけで問題が解決すると思います。プロデューサーとコンシューマーを異なる要素に含めることができます。それはむしろ要素のポイントです。スタイルを一度定義すれば、参照するだけで再利用できます。

このチュートリアルはこれまでのところ良さそうですhttps://pascalprecht.github.io/2014/08/01/sharing-styles-across-web-components-with-polymer-and-core-style/

于 2015-01-29T11:01:57.533 に答える