Svelte 是不是有助于动态 CSS 样式？

Posted 2023-02-19

【中文标题】Svelte 是不是有助于动态 CSS 样式？

【英文标题】：Does Svelte facilitate dynamic CSS styling?Svelte 是否有助于动态 CSS 样式？

【发布时间】：2018-01-01 15:24:56

【问题描述】：

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

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

<button class="class">

目前，这可以通过创建一个computed property 来实现，该computed property 在某些条件下会返回类名或空字符串。

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

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

【参考方案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>

【讨论】：

截至今天，内联表达式为<button class='active ? "active": "inactive"'>（少了一个括号，万岁！）

如果你来自 React，你也可以使用类似 JSX 的语法：<button class=`$active ? "active": "inactive"`>

【参考方案2】：

今天你可以使用：

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

然后

<MyComponent whitetext=true />

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

【讨论】：

这样如何设置多个类？

赞这个<div class:whitetext class:issponsored class:offset></div>

【参考方案3】：

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

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

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)'>

【参考方案4】：

根据教程是：

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

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

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

【参考方案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>

【讨论】：

svelte.dev/repl/be0bbe0d7e28439baf08a7c432a95ef8?version=3.22.0 svelte 可以使用嵌套组件促进动态 css 样式。