Question

我参加了我的第一个Dart项目。我已经设法制作了工作标签但我无法在网络浏览器中显示我的聚合物元素。输出应该是浅灰色的功能区，就像在Office 2007+中一样。我唯一能看到的是0x0px浅灰色垂直线。如果我使用经典的HTML和CSS（没有模板），它就可以工作。

我不明白我做错了什么。

这是我的HTML：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CVWebkit</title>
        <link rel="stylesheet" type="text/css" href="CVWebkit.css" media="screen" />
        <script src="scripts/packages/shadow_dom/shadow_dom.min.js"></script>
        <script type="application/dart" src="scripts/cvwebkit.dart"></script>
        <script src="scripts/packages/browser/dart.js"></script>
    </head>
    <body>

          <polymer-element name="zone-ruban">
                <template>
                <link rel="stylesheet" type="text/css" href="./CVWebkit.css"/>
                <div class="ruban">
                  <template repeat="{{zone in zones}}">
                    <div id="{{zone}}">
                      <template repeat="{{fonction in fonctions}}">
                        <img src="{{fonction}}"/>
                        <span class="titre_ruban">{{fonction}}</span>
                      </template>
                    </div>
                </template>
                </div>
                </template>
              </polymer-element>
    </body>

这是我的Dart代码（cvwebkit.dart）：

import 'dart:html';
import 'dart:async';
import 'packages/polymer/polymer.dart';
import 'packages/observe/observe.dart';


void main() {
  querySelectorAll(".onglet")..onClick.listen(ouvrirOnglet);
}

@CustomTag('zone-ruban')
class ZoneRuban extends PolymerElement with Observable {
  final List zones = toObservable(['navigation', 'composants', 'propcompo', 'utilisateur']);
  final  List fonctions = toObservable(['Navigation', 'Composants', 'Propriétés du composant', 'Données utilisateur']);
  ZoneRuban.created: super.created();
}

CSS：

.ruban {
    background-color: transparent;
    top:0px;
    height: 100%;
    border-right: 1px solid grey;
    position: inherit;
}

#navigation{
    width:10%;
}

#composants{
    width:25%;
    left:10%;
}

#propcompo{
    width:40%;
    left:35%;
}

#utilisateur{
    width:25%;
    left:75%;
}

.titre_ruban {
    left:0%;
    width:100%;
    bottom:0px;
    position:inherit;
    text-align:center;
    color:gray;
    text-shadow : 0px -1px 1px #000 ;
    height:15%
}

.contenu_ruban {
    top:0px;
    height:85%;
    left:0px;
    width:100%;
    vertical-align:central;
    position:inherit;
}

.user_menu {
    display:none;
}

知道为什么没有出现色带？

Answer 1

我想你需要像

这样的东西

:host {
  display: block;
}

在您的元素CSS中。

显示Polymer.dart元素，并使用Polymer.dart样式

1 个答案: