Svelteit Logo

Lists

Example :: List Default (Array)

  • Apple
  • Orange
  • Plum

<script>
  import { List } from '@colorfuldots/svelteit'
  let fruitsArray = ["Apple", "Orange", "Plum"];
</script>

<List>
  {#each fruitsArray as item}
    <li>{item}</li>
  {/each}
</List>

Example :: Default List (Object)

  • Apple
  • Fuji
  • Red

<script>
  import { List } from '@colorfuldots/svelteit'
  let objectThings = {fruit:"Apple", kind:"Fuji", color:"Red"};
</script>

<List>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>

Example :: Colors

  • Apple
  • Fuji
  • Red
  • Apple
  • Fuji
  • Red
  • Apple
  • Fuji
  • Red
  • Apple
  • Fuji
  • Red
  • Apple
  • Fuji
  • Red
  • Apple
  • Fuji
  • Red
  • Apple
  • Fuji
  • Red
  • Apple
  • Fuji
  • Red

<script>
  import { List } from '@colorfuldots/svelteit'
  let objectThings = {fruit:"Apple", kind:"Fuji", color:"Red"};
</script>

<List primary>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List secondary>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List success>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List danger>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List warning>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List info>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List light>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List dark>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>

Example :: List With Avatar / Image

  • Sally

    Sally

  • Mary

    Mary

  • Jane

    Jane


<script>
  import { List } from '@colorfuldots/svelteit'
  let users = [
    {
      id: 1,
      name: 'Sally',
      avatar: 'https://i.pravatar.cc/50',
      bio: 'This is me, Sally and I like people.',
      slug: 'javascript:void(0);',
    },
    {
      id: 2,
      name: 'Mary',
      avatar: 'https://i.pravatar.cc/50',
      bio: 'This is me, Mary and I like cats.',
      slug: 'javascript:void(0);',
    },
    {
      id: 3,
      name: 'Jane',
      avatar: 'https://i.pravatar.cc/50',
      bio: 'This is me, Jane and I like ice cream.',
      slug: 'javascript:void(0);',
    },
  ]
</script>

<List>
  {#each users as user}
    <li>
      <Image
        avatar
        title={user.name}
        img={user.avatar}
        height={45}
        width={45}
        linkRoute={user.slug} />
      <div style="display:inline-grid;margin-left:5px;">
        <h3>{user.name}</h3>
      </div>
    </li>
  {/each}
</List>

API

Coming soon!

Lists

Lists are powerful tools to group similar elements, and lists give visitors to your site an easy way to zoom in on groups of information. Just about anything fits in a list, from sets of instructions to collections of links.