我试图了解core-style
。我注意到,到目前为止,在所有示例中,在core-style
中仅引用了诸如Button之类的元素-没有类引用(例如.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>
.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'];
}
}
上面的代码不呈现。
谢谢
最佳答案
您仅创建了<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/
关于dart - 核心样式和类似乎不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28212690/