snuffydev / svelte-flatlist

A draggable, customizable, mobile-friendly menu that's simple and easy to use.

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

Prop	Description
visible	(REQUIRED) visibility state
style	(See below for options) Customize the colors to fit your needs.
zIndex	Same as CSS z-index (defaults to 9999)
position	Position of the list on screen (defaults to 'center')
duration	Duration of the opening & closing transition (defaults to 400)
maxWidth	Maximum width of the list - must include a CSS unit (defaults to 640px)
gap	Gap in between list items - must include a CSS unit (defaults to 0.8rem)
overflow	Behavior for vertical overflow, same as CSS overflow-y (defaults to 'auto')

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

Style Props	Description
bgColor	Base background color
handle	(see below for options) Color options for the handle

Handle Properties	Description
bgColor	Handle background color
fgColor	Handle foreground color
height	Handle height (ex: '5rem')

Events

Event	Description
close	Event fires when list is closed

Events

Event	Description
close	Event fires when list is closed