html5 – Dart webUI CSS问题

我在使用webUI时遇到样式问题.

当我注入我的dataValues时,我的设计被打破了.

在我的具体情况下,我的菜单显示不正确.
从我所看到的,看起来{{dataValue}}的初始字符串长度为0,并且在webUI完成注入之前应用了html和css.

所以现在当我把我的字符串,它看起来像是错误的长度计算.

在调试的时候,当我重新编辑css文件时(我没有改变宽度：100％我只是重新编辑并保存以便重新应用css),然后它看起来很好.

我尝试使用(来自dart文件)：

element.style.width =  "100%";
element.classes.add("classWithWidth100Percent");

但这似乎都不起作用.

所以基本上我认为我可以通过重新加载/重新应用CSS来解决这个问题.任何人都知道如何实现这一目标？

编辑：
什么是{{datavalue}}？ ..输出我的字符串….< - 什么字符串？ ..错误的长度..< - 它有什么不妥？如果您在Dart编辑器中“以Javascript身份运行”并且只是从硬盘运行HTML文件 - 它有效吗？ CSS样式是否正确显示？在哪个浏览器？
> {{dataValue}}是Darts webUI的表示法.
>我的字符串是一系列常规字符 – 例如“Word”
> Dart将{{dataValue}}解释为长度为0的字符串.当我使用webUI“注入”我的字符串时,应用css就像长度为0.所以现在,我可以看到不应该有的换行符. width = 100％不会重新应用新的字符串长度.
> Javascript或Dartium没有区别.
>我正在使用Chromium.

编辑2：

是的,dataValue具有初始值,仍然破坏了设计.

String dataValue = "some text";

这是代码：

<div id='headerContainer'>
    <div id='headerBg' class="displaying_theFlow"></div>
    <header id="header">
        <nav id='menu'>
            <a href="#theFlow">{{theFlow}}</a>
            <a href="#connect">{{connect}}</a>
            <a id="logoLink" href="#welcomeScreen">
                <div id="logoBg"></div>
                <div id="logo" alt="logoImg">logoImg</div>
            </a>
            <a href="#business">{{business}}</a>
            <a href="#aboutUs">{{aboutUs}}</a>
        </nav>
    </header>
</div>

在.dart文件中,我只是为Strings theFlow,connect,business等分配值,然后调用watcher.dispatch();

这是在CSS文件中：

#headerContainer {
  /*height: 180px;*/
  z-index: 1000;
  }
#header{
  position: fixed;
  top: 15px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 1000;
  -webkit-transition: top .2s;
  -moz-transition: top .2s;
  -ms-transition: top .2s;
  -o-transition: top .2s;
  transition: top .2s;
  }

#header.up {
  top: -30px;
  }  
#headerBg {
  position: fixed;
  background-color: #274a80;
  height:8px;
  width: 100%;
  z-index: 1000;
  -webkit-transition: height .2s;
  -moz-transition: height .2s;
  -ms-transition: height .2s;
  -o-transition: height .2s;
  -webkit-transition: background-color .6s;
  -moz-transition: background-color .6s;
  -ms-transition: background-color .6s;
  -o-transition: background-color .6s;
  } 

#headerBg.long{
  height: 75px;
  }  

#header a {
  font-size: 15px;
  color: #ffffff;
  margin-left : .4em;
  margin-right: .4em;
  text-decoration: none;
  display:inline-block;
  vertical-align:middle;
  opacity : .3;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
  }

#header a:hover {
  opacity: .5;
  }
#header a.active { 
  opacity: 1;
  }

解决方法

我复制了你的问题,并得到了修复(虽然我担心这是一个黑客攻击).
我使用WebUI存根代码创建了一个新的应用程序,然后使用以下内容替换了xclickcomponent.dart的内容(我还使用了您提供的HTML作为组件和CSS的内容)：

@observable
String theFlow = "";
String connect = "connect";
String aboutUs = "";
String business = "business";

CounterComponent() {
  // Delay adding the value so CSS has a chance to be drawn.
  new Timer(new Duration(seconds: 3),() {this.setFlow();});
}

void setFlow() {
  theFlow = "New Flow";

  // Now refresh the CSS by removing then adding the stylesheet
  var style = query("head>link[rel=stylesheet]");
  style.remove();
  var elem = new LinkElement();
  elem.attributes["rel"] = "stylesheet";
  elem.attributes["href"] = "../stackoverflow.css";
  var header = query("head");
  header.append(elem);
}

即使这对你来说太黑了,希望它能帮助你:)

更新：提出的问题：https://github.com/dart-lang/web-ui/issues/487

原文地址：https://www.jb51.cc/html5/168457.html

html5 – Dart webUI CSS问题

解决方法

相关推荐