简体   繁体   中英

How to use Polymer <content> tag in dart?

I try to use the content-tag in dart polymer. The Polymer-Element is displayed properly, but the content is not displayed at all.

This is my code:

<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">&times</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>

Then I instantiate in the index.html:

<modal-dialog>This should be in the content-tag</modal-dialog>

I am using:
Dart Editor version 1.2.0.release (STABLE)
Dart SDK version 1.2.0
OS X 10.8.5

Thank you for any hints :)

I tried your code. I removed the CSS link and the content was show in the right place.

It might be you run into the same bug as I did recently CSS linked in entry page header moved into content by pub build

Add this CSS after your style tag

<style>
  * {
    display: block;
    border: solid 3px red;
  }
</style>

you will see that the CSS is moved into the content. Polymer seems to have some problems with CSS currently.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM