如何安装svelte
I had the need to dynamically apply some CSS properties to an element, using Svelte, when one of its variables had a particular value.
当一个变量具有特定值时,我需要使用Svelte将某些CSS属性动态地应用于元素。
The simplest solution I found was to add an HTML class when the selected
variable value was true
, and then I wrote some CSS that targeted that element with the class:
我找到的最简单的解决方案是,当selected
变量的值为true
时,添加一个HTML类,然后我编写了一些针对该元素CSS类:
<style>
/* ...other CSS... */
span.cell.selected {
outline-color: lightblue;
outline-style: dotted;
}
</style>
<span class="cell {selected === true ? 'selected' : ''}">
{value}
</span>
This kind of need is so common that Svelte added the ability to bind the class name to a variable value:
这种需求非常普遍,以至于Svelte添加了将类名绑定到变量值的功能:
<span class="cell" class:selected="{selected}">
{value}
</span>
and in a more concise way, using the shorthand notation:
并以一种简明的方式使用速记符号:
<span class="cell" class:selected>
{value}
</span>
如何安装svelte