是否可以在同一页面/组件上选择两个具有不同设计的类

Question

Svelte有一个很好的工具来定义类的设计，但是否可以在一个组件中定义两个不同的类
我正在处理菜单，它位于一个组件中。当页面被重新加载时，我需要"选择"两个按钮，一个来自主菜单，另一个来自子菜单，但似乎即使类有不同的名称和变量，它也只激活其中一个-第一个。是否可以同时在一个组件中选择更多的类/活动按钮？

Answer 1

您可以在同一组件中、在不同元素上以及在单个元素上多次使用多个class:指令。

在单个元素上，您可以混合&将多个class:指令与class=属性进行匹配。Svelte将合并结果。

所有这些都是支持的，如以下代码(和REPL(所示：

<script>
let name = 'world';

let red = false
let underline = false
let align = "left"
</script>
<p>
<label class:selected={red}>
<input type="checkbox" bind:checked={red} />
Red
</label>
</p>
<p>
<label class:selected={underline}>
<input type="checkbox" bind:checked={underline} />
Underline
</label>
</p>
<p>
Align
<label class:selected={align === "left"}>
<input type="radio" value="left" bind:group={align} />
left
</label>
<label class:selected={align === "center"}>
<input type="radio" value="center" bind:group={align} />
center
</label>
<label class:selected={align === "right"}>
<input type="radio" value="right" bind:group={align} />
right
</label>
</p>
<h1 
class="align-{align}"
class:red
class:underline
>
Hello {name}!
</h1>
<style>
.red {
color: red;
}

.underline {
text-decoration: underline;
}

.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}

label {
padding: .5em .5em .25em;
}
label.selected {
background: lavender;
}
</style>

具有多个class指令并与class属性混合的单个元素：

<h1 
class="align-{align}"
class:red
class:underline
>
Hello {name}!
</h1>

在多个元素上使用的同一类(selected(：

<p>
<label class:selected={red}>
<input type="checkbox" bind:checked={red} />
Red
</label>
</p>
<p>
<label class:selected={underline}>
<input type="checkbox" bind:checked={underline} />
Underline
</label>
</p>

你的案子肯定还有别的事(或者我不理解你的问题(。