gpt4 book ai didi

dart - 如何使用库的@HtmlImport指令制作.dart文件

转载 作者:行者123 更新时间:2023-12-03 04:05:57 25 4
gpt4 key购买 nike

鉴于库指令可以是文件中的唯一指令,我如何才能使作为库一部分的组件.dart文件也包含@HtmlImport指令?

例如,给出以下内容:

.dart

part of epimss_shared.components;

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

@observable String lb50 = lightBlue_50;
@observable String lb100 = lightBlue_100;
@observable String lb200 = lightBlue_200;
@observable String lb700 = lightBlue_700;

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

.html

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

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

<template>
<core-style id='blue-theme'>
:host {}
<!-- BLUE THEME -->
.lblue50 {
background-color: {{lb50}};
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px;
width: {{width}};
}

.lblue100 {
background-color: {{lb100}};
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px;
}

.lblue200 {
background-color: {{lb200}};
border-radius: 10px;
padding-left: 2px;
padding-right: 2px;
padding-top: 4px;
}

.lblue700 {
background-color: {{lb700}};
border-radius: 10px;
}
</core-style>
</template>

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

如果我应该添加..

@HtmlImport('blue_theme.html')
library epimss_shared.component.dart;

到.dart src的错误提示,库指令可以是页面上的唯一指令。

我以为,有了新的HtmlImport,我现在终于可以将.dart和.html文件放入库中,就像我可以单独使用.dart文件一样,但这似乎是不正确的。

有没有办法完成我想做的事情?谢谢

最佳答案

导入库时,转换器将为组件HTML添加一个由@HtmlImport(...)声明的HTML导入,因此您或组件的用户不必手动执行此操作。

另请参阅Dart. How to use @HtmlImport on the example of Polymer?

关于dart - 如何使用库的@HtmlImport指令制作.dart文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29068460/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com