文章/答案/技术大牛

发布

社区首页 >问答首页 >显示Polymer.dart元素，并在Polymer.dart中使用样式

问显示Polymer.dart元素，并在Polymer.dart中使用样式
EN

Stack Overflow用户

提问于 2014-04-06 03:48:08

回答 1查看 139关注 0票数 1

我正在做我的第一个Dart项目。我已经成功地制作了工作标签。

但我在让我的聚合物元素出现在web浏览器上时遇到了麻烦。输出应该是浅灰色的丝带，就像在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;
}

你知道为什么丝带没有出现吗？

css

dart

polymer

回答 1

Stack Overflow用户

发布于 2014-04-06 05:32:51

我猜你需要像这样的东西

:host {
  display: block;
}

在元素CSS中。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22885944

复制

相似问题

问显示Polymer.dart元素，并在Polymer.dart中使用样式
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示Polymer.dart元素，并在Polymer.dart中使用样式EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示Polymer.dart元素，并在Polymer.dart中使用样式
EN