https://github.com/dasdaniel/svelte-listbox

listbox svelte component
https://github.com/dasdaniel/svelte-listbox

Last synced: 3 months ago
JSON representation

listbox svelte component

• Host: GitHub
• URL: https://github.com/dasdaniel/svelte-listbox
• Owner: dasDaniel
• Created: 2020-06-03T14:29:36.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-13T00:38:36.000Z (over 1 year ago)
• Last Synced: 2024-10-11T12:56:05.041Z (3 months ago)
• Language: Svelte
• Size: 213 KB
• Stars: 12
• Watchers: 4
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## svelte-listbox

A svelte implementation of https://github.com/tailwindui/vue

# WIP

## example use:

```html

  // import components

  import { Listbox, ListboxButton, ListboxList, ListboxOption } from "svelte-listbox";

  // define selection

  let selection = null;

  // define options

  let values = [

    { name: "abc", img: "https://randomuser.me/api/portraits/lego/1.jpg" },

    { name: "def", img: "https://randomuser.me/api/portraits/lego/2.jpg" },

    { name: "ghi", img: "https://randomuser.me/api/portraits/lego/3.jpg" },

    { name: "jkl", img: "https://randomuser.me/api/portraits/lego/4.jpg" },

    { name: "mno", img: "https://randomuser.me/api/portraits/lego/5.jpg" },

    { name: "pqr", img: "https://randomuser.me/api/portraits/lego/6.jpg" },

    { name: "stu", img: "https://randomuser.me/api/portraits/lego/7.jpg" },

    { name: "vwx", img: "https://randomuser.me/api/portraits/lego/8.jpg" }

  ];

  :global(.max-h-14) {

    max-height: 14em;

  }



  

    


      {selection !== null ? selection.name : ''}

      

        

      

    

    {#if isOpen}

      

        {#each values as item}

          

            

              

              {item.name}

            

            {#if selected}

              

                

                  

                

              

            {/if}

          

        {/each}

      

    {/if}

  



```