gpt4 book ai didi

html - Dart webUI CSS 问题

转载 作者:太空狗 更新时间:2023-10-29 13:48:27 24 4
gpt4 key购买 nike

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

当我注入(inject)数据值时,我的设计被破坏了。

在我的具体案例中,我的菜单显示不正确。据我所见,{{dataValue}} 的初始字符串长度为 0,并且在 webUI 完成注入(inject)之前应用了 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“注入(inject)”我的字符串时,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 文件中,我只是为字符串 theFlowconnectbusiness 等赋值,然后调用 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;
}

最佳答案

我复制了你的问题,并得到了修复(虽然我担心这是一个 hack)。
我使用 WebUI stub 代码创建了一个新应用程序,然后将 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

关于html - Dart webUI CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16148831/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com