svelte - Svelte 是否有助于动态 CSS 样式？

Question

在 Svelte 中，应如何根据组件状态更改元素上的类？

例如，您可能希望在某些条件下将类应用于按钮，如下例所示。

<button class="{{class}}">

现在，这可以通过创建一个在特定条件下返回类名或空字符串的计算属性来实现。

但是，我担心这是否会污染计算属性名称空间。例如，如果有status，则可能需要同时设置动态文本（like statusMessage）和类（like statusClass）。

有没有更好的方法来做到这一点，或者计算属性是要走的路？是否计划为 Svelte 提供更明确的 CSS 支持？

Answer 1

您可以使用内联表达式，如下所示：

<button class='{{active ? "active": "inactive"}}'>
  {{active ? 'Selected' : 'Select this'}}
</button>

这通常比使用计算属性要好，因为只需查看模板就可以立即清楚可能的值是什么。

如果表达式变得笨拙，您还可以使用辅助函数——在某些情况下，您可能更喜欢这些函数而不是计算值：

<button class='{{getClass(status)}}'>{{getText(status)}}</button>

<script>
  export default {
    helpers: {
      getClass(status) {
        // ...
      },
      getText(status) {
        // ...
      }
    }
  };
</script>

Answer 2

今天你可以使用：

export let whitetext = false;
<div class:whitetext></div>

接着

<MyComponent whitetext={true} />

简单的基于真/假的类的语法。

Answer 3

对于其他流行的框架，没有内置的使用方式，例如，{#if}内部条件。class=

因为一旦你有两个以上的类，内联表达式就会变得笨拙，在这种情况下我会直接使用助手。类构建器助手的快速示例：

helpers: {
    getSlideClasses(index, currentIndex) {
        let classes = ['js_slide']
        if ( index === currentIndex ) {
            classes.push('selected')
        }
        if ( index === 0 ) {
            classes.push('first')
        }
        return classes.join(' ')
    }
}

接着：

<div class='{ getSlideClasses(index, currentIndex)}'>

Answer 4

根据教程，它是：

<div class:active="{current === 'foo'}">

如果条件返回 true，则active添加该类。

见：https ://svelte.dev/tutorial/classes

Answer 5

来自文档：https ://svelte.dev/tutorial/classes

<script>
    let current = 'foo';
</script>

<style>a
    button {
        display: block;
    }

    .active {
        background-color: #ff3e00;
        color: white;
    }
</style>

<button
    class="{current === 'foo' ? 'active' : ''}"
    on:click="{() => current = 'foo'}"
>foo</button>

<button
    class="{current === 'bar' ? 'active' : ''}"
    on:click="{() => current = 'bar'}"
>bar</button>

<button
    class="{current === 'baz' ? 'active' : ''}"
    on:click="{() => current = 'baz'}"
>baz</button>