Svelte FlatList

A mobile-friendly, simple, and customizable draggable menu.

Documentation / Demo site: https://svelte-flatlist.netlify.app/

Find me on NPM!

Demo

Demo/Docs REPL

Installation

npm install -D svelte-flatlist

Usage

Using Svelte FlatList is very simple. Below are some usage examples.

Each Block

See this in action at the Svelte REPL! Link

<script>
  import FlatList from 'svelte-flatlist';
  let visible;
  const items = [0,1,2,3,4,5];

  function handleClose(){
    visible = false;
  }
</script>

<button on:click={()=>(visible=true)}>
    Click me!
</button>

<FlatList on:close={handleClose} bind:visible>
  {#each items as item}
    <span>{item}</span>
  {/each}
</FlatList>

Customize the theme

See this in action at the Svelte REPL! Link

<script>
  import FlatList from 'svelte-flatlist';
  let visible;
  const items = [0,1,2,3,4,5];

  function handleClose(){
    visible = false;
  }
</script>

<button on:click={()=>(visible=true)}>
    Click me!
</button>

<FlatList style={{bgColor: '#424242', handle: {fgColor:'#f2f2f2', height: '2rem', bgColor: '#000000'}}} on:close={handleClose} bind:visible>
    <span>item 1</span>
    <span>item 2</span>
    <span>item 3</span>
    <span>item 4</span>
    <span>item 5</span>
</FlatList>

Manually list items

See this in action at the Svelte REPL! Link

<script>
  import FlatList from 'svelte-flatlist';

  let visible;
  function handleClose(){
    visible = false;
    }
</script>

<button on:click={()=>(visible=true)}>
    Click me!
</button>

<FlatList bind:visible on:close={handleClose}>
  <span>item 1</span>
  <span>item 2</span>
  <span>item 3</span>
  <span>item 4</span>
</FlatList>

Props

Style Properties

Svelte-Flatlist allows you to modify the styles to fit your needs best using style prop.

Example:

<Flatlist
  style={{
    bgColor: "#424242",
    handle: {
      height: "3rem",
      bgColor: "#121212",
      fgColor: "#fefefe"
    }
  }}
>

style Type

The type of the style prop:

type ListStyle = {
  bgColor?: string;
  handle?: HandleStyle;
};

type HandleStyle = {
  bgColor?: string;
  fgColor?: string;
  height?: string;
};

More Info

Events

Events