코어 스타일 및 클래스가 작동하지 않는 것 같습니다.

core-style을 이해하려고합니다. 지금까지 보아온 모든 예제에서 Button과 같은 요소는 core-style에서 참조됩니다. 클래스 참조가 없습니다 (예 : .blue). core-style에 클래스 참조를 배치하려했지만 렌더링하지 않습니다. 위의 코드는 렌더링하지 않습니다 .dart코어 스타일 및 클래스가 작동하지 않는 것 같습니다.

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']; 

    } 
}

<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>

.HTML

아래의 예를 참조하십시오.

감사

출처

2015-01-29 st_clair_clarke

CSS에 몇 가지 문제가 있습니다. 'width : {{width}}'와'.lb-container1 {...}'다음에';'가 누락되면': host {...} '에 중첩됩니다. –

당신은 단지 <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-29 11:01:57

나는 예상 한 결과없이 소비자를 사용했다. 나는 또한 당신이 언급 한 그 기사를 읽었습니다. 나는 다른 것을 놓치고 있을지도 모른다고 생각한다. –

스타일 적용을 위해 페이지에 ''요소를 추가해야했지만 가져 오기만으로는 충분하지 않았습니다. 그렇지 않으면 제대로 작동했습니다. 요소 작업을위한 배경을 만들기 위해'display : block;''을 추가해야했습니다 : host : {background : red; display : block;}'(''''inline-block''도 잘 작동하지만,''inline''은 기본값으로 사용되지 않습니다). –

고마워요. 이제 작동합니다. 나는 여전히 블루 테마 요소의 추가를 기뻐하고있다. –

코어 스타일 및 클래스가 작동하지 않는 것 같습니다.

답변

관련 문제