Skip to content

search-list 4.6.8

Install from the command line:
Learn more about npm packages
$ npm install @dusk-network/search-list@4.6.8
Install via package.json:
"@dusk-network/search-list": "4.6.8"

About this version

Dusk UI Kit - Organism - SearchList

Storybook Docs

Installation

npm i -D @dusk-network/search-list

Usage

<script>
  import SearchList from "@dusk-network/search-list";
  import RichText from "@dusk-network/rich-text";
  import DetailList, { Item } from "@dusk-network/detail-list";
  import { useQuery } from "@sveltestack/svelte-query";
  import { tokens } from "./data.js";

  let searchResults;

  async function getData() {
    return tokens;
  }

  const apiData = useQuery("content", getData);
</script>

{#if $apiData.isLoading}
  <p>Loading...</p>
{:else if $apiData.isError}
  <p>Error: {$apiData.error}</p>
{:else}
  <SearchList data="{$apiData.data}" bind:dataSearchResults="{searchResults}">
    {#if searchResults}
      <DetailList>
        {#each $searchResults as token}
          <Item>
            <svelte:fragment slot="icon">
              {#if token.image}
                <div>
                  <img src="{token.image}" alt="symbol" />
                </div>
              {/if}
            </svelte:fragment>
            <svelte:fragment slot="term">
              <RichText>
                <p>{token.token}</p>
              </RichText>
            </svelte:fragment>
            <svelte:fragment slot="definition">
              <RichText align="right">
                <p>{token.amount}</p>
              </RichText>
            </svelte:fragment>
          </Item>
        {/each}
      </DetailList>
    {/if}
  </SearchList>
{/if}

Details


Assets

  • search-list-4.6.8-npm.tgz

Download activity

  • Total downloads 5
  • Last 30 days 0
  • Last week 0
  • Today 0