我尝试在 Dart 聚合物中使用内容标签。 Polymer-Element 显示正确,但内容根本不显示。
这是我的代码:
<polymer-element name="modal-dialog" >
<link rel="stylesheet" href="packages/bootjack/css/bootstrap.css">
<template>
<button on-click="{{show}}">jo</button>
<div id="modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 style="margin: 0">Bootjack</h3>
</div>
<div class="modal-body">
<content></content>
</div>
<div class="modal-footer" style="margin: 0">
<button class="btn btn-success" data-dismiss="modal" id="ok">OK</button>
</div>
</div>
</div>
</div>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
import 'package:bootjack/bootjack.dart';
import 'dart:html';
@CustomTag('modal-dialog')
class ModalDialog extends PolymerElement {
Modal modal;
ModalDialog.created() : super.created(){
Modal.use();
Transition.use();
modal = Modal.wire(this.shadowRoot.querySelector("#modal"));
}
void show(){
modal.show();
}
}
</script>
</polymer-element>
然后我在 index.html 中实例化:
<modal-dialog>This should be in the content-tag</modal-dialog>
我在用:
Dart 编辑器版本 1.2.0.release (STABLE)
Dart SDK 版本 1.2.0
OS X 10.8.5
谢谢你的任何提示:)
最佳答案
我试过你的代码。我删除了 CSS 链接,内容显示在正确的位置。
可能是你遇到了和我最近一样的错误
CSS linked in entry page header moved into content by pub build
在您的样式标签后添加此 CSS
<style>
* {
display: block;
border: solid 3px red;
}
</style>
您会看到 CSS 已移至内容中。
Polymer 目前似乎对 CSS 有一些问题。
关于twitter-bootstrap - 如何在 Dart 中使用 Polymer <content> 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22074181/