个人中心
gpt4 book ai didi

dart - 如何在 Dart Web UI 模板中设置元素样式？

转载 作者：行者123 更新时间：2023-12-02 00:09:20 25 4
gpt4 key购买 nike

假设我有一个自定义组件

<head>
  <link rel="stylesheet" src="...">
</head>

<body>
  <element name="elem">
    <template>
      <ul class="foo">
...

引用的样式表有一个条目

ul .foo {
  list-style-type: none;
}

问题是我无法将样式应用到 ul。除非我将 style 属性放在 ul 元素本身上，否则我尝试的任何方法都不起作用。我试过使用 scoped 属性，但这也不起作用。它做了一件奇怪的事情，其中​​ ul 的类变成了“elem_foo”。

最佳答案

感谢提问!以下是我的做法:

在我的主要 HTML 中:

<div is="x-click-counter">

在我的自定义元素中:

<element name="x-click-counter" constructor="CounterComponent" extends="div">
  <template>
    <button class="button1" on-click="increment()">Click me</button><br />
    <span>(click count: {{count}})</span>
    <style scoped>
      div[is=x-click-counter] span {
        color: red;
      }
    </style>
  </template>
  <script type="application/dart" src="xclickcounter.dart"></script>
</element>

这里有两件事。

1) 我使用 <div is="x-foo"> 的形式而不是 <x-foo> .我喜欢第一种形式向后兼容的方式，它更明确地说明了我将如何找到元素。

2) 我放了一个 <style scoped>在我的里面 <template>标签。

Web UI 将看到范围样式标签，并为您生成一个 CSS 文件。它看起来像这样:

/* Auto-generated from components style tags. */
/* DO NOT EDIT. */

/* ==================================================== 
   Component x-click-counter stylesheet 
   ==================================================== */
div[is=x-click-counter] span {
  color: #f00;
}

Web UI 还将此生成的 CSS 文件的链接添加到您的主 HTML 文件。

关于dart - 如何在 Dart Web UI 模板中设置元素样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16351110/

25 4 0
文章推荐： synchronization - Ada:选择然后中止语句
文章推荐： api - 如何执行 DotNetNuke WebAPI 更新/删除？
文章推荐： assembly - NASM:发出非标量(链接时间)值的 MSW
文章推荐： sql-server - 如何在 SQL Server Reporting Services 的 RunningValue 函数中指定组？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com