2014-06-18 4 views
0

어떤 이유에서 Polymer 맞춤 요소의 내부 (: 호스트) 스타일이로드되지 않습니다. 술집의 실제 fancy_button 구성 요소 (https://pub.dartlang.org/packages/fancy_button)를 사용하고 있습니다.내 Polymer 맞춤 구성 요소의 내 스타일이 인식되지 않는 이유는 무엇입니까?

hello_world.html

<head> 
    <link rel="import" href="packages/polymer/polymer.html"> 
    <link rel="import" href="packages/fancy_button/fancy_button.html"> 
    <link rel="import" href="../lib/components/first-component/first-component.html"> 
</head> 

<body> 
<button is="fancy-button">Wooot!</button> 
<script type="application/dart">export 'package:polymer/init.dart';</script> 
</body> 

fancy_button.html :

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> 

<polymer-element name="fancy-button" extends="button"> 
    <template> 
    <style> 
     :host { 
     background: linear-gradient(to bottom, #ff5db1 0%,#ef017c 100%); 
     box-shadow: 10px 10px 5px #888888; 
     border-radius: 5px; 
     font-size: 2em; 
     border: 0; 
     font-family: 'Tangerine', cursive; 
     padding: 30px; 
     } 

     :host(:hover) { 
     cursor: pointer; 
     } 

     :host(:active) { 
     font-size: 3em; 
     } 
    </style> 
    <content></content> 
    </template> 
    <script type="application/dart" src="fancy_button.dart"></script> 
</polymer-element> 
+0

괜찮아요. Dartium 개발자 도구에서 오류 출력을 표시합니까? –

답변

1

을 유지하고 일했다. 따라서 Polymer 웹 구성 요소의 스타일은 이전 버전의 Dartium에서는 작동하지 않는 것 같습니다. Günter가 제안한 Dev 채널 버전을 얻거나 pub build을 일반 Chrome에서 대신 사용할 수 있습니다.

1

내가 코드를 시도하고 나는 그것의 증가 큰 분홍색 '우트'버튼을 얻을 (나를 위해 작동 클릭했을 때의 크기)

이 줄을 코멘트 아웃 할 때

<!--<link rel="import" href="../lib/components/first-component/first-component.html">--> 

또한 pubspec.yaml하는

transformers: 
- polymer: 
    entry_points: 
    - web/hello_world.html 

를 추가했다 (dev에 채널 다트 버전 1.5.0 - 가장자리)

이 당신을 위해 여기에 있지만 일을하는 이유가 될 수있다
하지만 Dart 1.4에서는 아직 지원되지 않은 CSS에서는 아무것도 볼 수 없습니다.

나는 또한 내가 개발자 채널 ( http://storage.googleapis.com/dart-archive/channels/dev/release/latest/dartium/dartium-macos-ia32-release.zip)에서 Dartium로 업그레이드 고분자 의존성 (0.10.1 + 1)

+0

안녕하세요. 그 줄을 없앴습니다. 내 코드는 다음과 같습니다. https://github.com/DaveNotik/woven_sandbox –

+0

여전히 여기서 작동합니다. –

+0

스타일이 적용되어 있습니까? 예, 다트 1.4.3이 있습니다. 나는 변압기를 추가했다. 방금 Chrome에서 (빌드)/빌드 (펍 빌드) 후에는 작동하지만 일반/웹 (Dartium에서)에서는 작동하지 않는다는 것을 깨달았습니다. 그 이유가 뭐야? 실제로 작동하도록 빌드해야합니까? –