Conditional Styling in Svelte Loop

Question

Has anyone used Svelte in their projects? I just have a small question. Let's say you are looping through an array and displaying the data in the array. And there are 4 objects in the array. If I only want to style the first iteration (bluma). How do I do it?

let items = [
        { icon: 'book', title: 'bulma', tags: ['public', 'sources'] },
        { icon: 'book', title: 'marksheet', tags: ['private'] },
        { icon: 'book', title: 'minireset.css', tags: ['public', 'sources'] },
        { icon: 'code-branch', title: 'daniellowtw/infboard', tags: ['public', 'forks'] },
        { icon: 'code-branch', title: 'mojs', tags: ['private'] }
    ]

{#each filteredItems as item}
    <a class="panel-block {item.}">
    <span class="panel-icon">
            {#if item.icon === "code-branch"}
            <i class="fas fa-code-branch" aria-hidden="true"></i>
            {:else if item.icon ==="book"}
            <i class="fas fa-book" aria-hidden="true"></i>
            {/if}

Thomas Hennes · Accepted Answer · 2022-03-04 16:41:29Z

Whenever a pure CSS approach is available, I would rather use that. Here you could make use of the :first-child selector:

<div class="panel-items">
{#each filteredItems as item}
    <a class="panel-block">
        <span class="panel-icon">
            {#if item.icon === "code-branch"}
                <i class="fas fa-code-branch" aria-hidden="true"></i>
            {:else if item.icon ==="book"}
                <i class="fas fa-book" aria-hidden="true"></i>
            {/if}
        </span>
    </a>
{/each}
</div>

<style>
    .panel-block {
        /* general panel block styling */
    }

    .panel-block:first-child {
        /* first panel block style overrides */
    }
</style>

Note that the entire loop is held within its own container div in order to make sure the first item in the loop is indeed the first child of its parent container.

Mehdi · Accepted Answer · 2022-03-04 09:37:32Z

1

This can be done by using the index provided as a second argument of the #each block:

{#each filteredItems as item, i}
  <span style="color:{i === 0 ? 'green' : 'red'}">
    {item.title}
  </span>
{/each}

Reference: Each block in svelte tutorial.

answered Mar 4, 2022 at 9:37

Mehdi

7,4431 gold badge37 silver badges49 bronze badges

Collectives™ on Stack Overflow

Conditional Styling in Svelte Loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related