如何在Dart Web UI模板中对元素进行样式化？ [英] How do I style elements in Dart Web UI templates?
问题描述
说我有一个自定义组件
< head&
< link rel =stylesheetsrc =...>
< / head>
< body>
< element name =elem>
< template>
< ul class =foo>
...
其中引用的样式表有一个条目
ul .foo {
list-style-type：none;
}
问题是我无法获得应用于ul 。没有我尝试工作，除非我把样式属性在ul元素本身。我试过放下与scoped属性，这也不工作。这是一个奇怪的事情，其中的类变成elem_foo。
感谢您的问题！
< >< div is =x-click-counter>
在我的自订元素中：
< element name =x-click-counterconstructor =CounterComponentextends =div>
< template>
< button class =button1on-click =increment（）>点击我< / button>< br />
< span>（点击数：{{count}}）< / span>
< style scoped>
div [is = x-click-counter] span {
color：red;
}
< / style>
< / template>
< script type =application / dartsrc =xclickcounter.dart>< / script>
< / element>
这里有两件事。
1）我使用< div is =x-foo> 的形式，而不是< x-foo& code>。我喜欢第一种形式更向后兼容，它更明确地说明了如何找到元素。
2）我把一个 ;
Web
看到范围样式标签，并为您生成一个CSS文件。它看起来像这样： / *从组件样式标签自动生成。 * /
/ *不要编辑。 * /
/ * ==================================== ==============
组件x-click-counter样式表
======================= ============================= * /
div [is = x-click-counter] span {
color：＃f00;
}
Web UI还会将此生成的CSS文件的链接添加到主HTML文件。
Say I have a custom component with
<head>
<link rel="stylesheet" src="...">
</head>
<body>
<element name="elem">
<template>
<ul class="foo">
...
where the referenced style sheet has an entry
ul .foo {
list-style-type: none;
}
The problem is that I can't get the style to apply to the ul. Nothing I tried works unless I put style attribute on the ul element itself. I have tried putting under with scoped attribute and that doesn't work either. It does a weird thing where the class of the ul becomes "elem_foo".
Thanks for the question! Here's how I do it:
In my main HTML:
<div is="x-click-counter">
In my custom element:
<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>
There are two things going on here.
1) I use the form of <div is="x-foo"> instead of <x-foo>. I like how the first form is more backwards compatible, and it's more explicit with how I will find the element.
2) I put a <style scoped> inside my <template> tag.
Web UI will see the scope style tag, and generate a CSS file for you. It looks like this:
/* Auto-generated from components style tags. */
/* DO NOT EDIT. */
/* ====================================================
Component x-click-counter stylesheet
==================================================== */
div[is=x-click-counter] span {
color: #f00;
}
Web UI also adds a link to this generated CSS file to your main HTML file.
这篇关于如何在Dart Web UI模板中对元素进行样式化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
