Classes and Styles

Class Directive

你可以根據一個值來添加或移除一個元素的 class。

現在這個方式已經不推薦了，建議使用 Class Attributes

<script>
    let active = true;

    function toggle() {
        active = !active;
    }
</script>

<button
    type="button"
    class="button {active ? 'active' : ''}"
    on:click={toggle}
>
    I'm a button
</button>

<style>
    button .active {
        background-color: #ff0;
    }
</style>

你也可以將其拆開成兩個屬性：

<button
    type="button"
    class="button"
    class:active={active}
    on:click={toggle}
>
    I'm a button
</button>

如果變數的名稱與 class 的名稱相同，你可以使用 class:active 來簡化：

<button
    type="button"
    class="button"
    class:active
    on:click={toggle}
>
    I'm a button
</button>

Class Attributes

Svelte 在 5.16 加入了 Class Attributes 這個新功能， 你可以在 class 中使用 Object 或是 Array，然後根據條件動態調整 Class Name。

如果你有多個 Class Name 需要根據條件動態調整。 過去使用 Class Directive 可以這樣寫。

<button
    type="button"
    class="button"
    class:active={active}
    class:bg-green-500={active}
    class:deactive={!active}
    class:bg-gray-200={!active}
    on:click={toggle}
>
    I'm a button
</button>

上面的寫法可以改為使用 Class Attributes 來精簡。

<button
    type="button"
    class=
    on:click={toggle}
>
    I'm a button
</button>

上面的寫法是使用 Object，如果要使用 Array 也可以。

<button
    type="button"
    class={[
        true && 'button',
        active && 'active bg-green-500',
        !active && 'deactive bg-gray-200',
    ]}
    on:click={toggle}
>
    I'm a button
</button>

我個人認為 Object 寫法較為好懂。

Style Directive

同樣的方式也可以使用在 style 上：

<script>
    let isRed = true;
</script>

<div style="color: {isRed ? 'red' : ''}">
    This will be red
</div>

<div
    style:color={isRed ? 'red' : ''}
>
    This will be red too
</div>

Component Styles

你可以傳入一個 CSS 變數來設定元件的樣式：

<!-- App.svelte -->
<Box --color="red" />

<!-- Box.svelte -->
<div class="box" />

<style>
    .box {
        width: 5em;
        height: 5em;
        border-radius: 0.5em;
        margin: 0 0 1em 0;
        /* 這裡接收外部傳入 Box component 的 CSS 變數 --color */
        background-color: var(--color, #ccc);
    }
</style>