第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY23- html的class標籤

svelte class tag

在說明完svelte的動態後,今天來分享一下html上常會用到的class標籤在svelte上的應用。

要如何動態更新class標籤

變更class標籤的內容其實很簡單,下面有個例子可以給大家參考。

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

<style>
    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>

不過今天分享的這一篇這樣就講完了嗎?當然沒有那麼快,其實有更簡潔更容易了解的方式來處理class標籤,接下來正式的開始說明一下svelte的class標籤處理方式。

svelte class tag

其實可以把class標籤的內容視為一個屬性,透過true或false決定class標籤內的這個屬性是否存在於class內,下面就由改寫之前的例子來說明在svelte如何更新class標籤。

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

<style>
    button {
        display: block;
    }

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

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

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

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

是不是這樣修改後比較容易閱讀呢,不只這樣,之前屬性綁定時的簡化的概念也可以套用在class標籤上喔,大家可以看看下面的例子。

<script>
    let big = false;
</script>

<style>
    .big {
        font-size: 4em;
    }
</style>

<label>
    <input type=checkbox bind:checked={big}>
    big
</label>

<div class:big>
    some {big ? 'big' : 'small'} text
</div>

簡單說明一下就是當變數名稱與class標籤的內容同名時就可以省略賦值的部分了。

小結

今天跟大家分享一個簡單又常用到的部分就是class標籤在svelte上的處理,了解這個後對於svelte開發上又更容易一些了

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *