https://github.com/snuffydev/svelte-flatlist
A draggable, customizable, mobile-friendly menu that's simple and easy to use.
https://github.com/snuffydev/svelte-flatlist
draggable drawer flatlist menu mobile svelte svelte-component svelte-components sveltejs
Last synced: 5 months ago
JSON representation
A draggable, customizable, mobile-friendly menu that's simple and easy to use.
- Host: GitHub
- URL: https://github.com/snuffydev/svelte-flatlist
- Owner: snuffyDev
- Created: 2021-11-25T10:06:03.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-12-20T16:04:37.000Z (over 3 years ago)
- Last Synced: 2024-10-30T00:32:50.257Z (8 months ago)
- Topics: draggable, drawer, flatlist, menu, mobile, svelte, svelte-component, svelte-components, sveltejs
- Language: Svelte
- Homepage: http://svelte-flatlist.netlify.app/
- Size: 24.4 KB
- Stars: 16
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte FlatList
A mobile-friendly, simple, and customizable draggable menu.
**Documentation / Demo site**: https://svelte-flatlist.netlify.app/
[Find me on NPM!](https://www.npmjs.com/package/svelte-flatlist)
## Demo
[Demo/Docs](https://svelte-flatlist.netlify.app/)
[REPL](https://svelte.dev/repl/b1b6b42ca4c944ca99f0063d5ca1ccdb?version=3.44.2)
### 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](https://svelte.dev/repl/2cfb8d8b8ff2447688874a2e0dacb731?version=3.44.2)
```html
import FlatList from 'svelte-flatlist';
let visible;
const items = [0,1,2,3,4,5];
function handleClose(){
visible = false;
}
(visible=true)}>
Click me!
{#each items as item}
{item}
{/each}
```
## Customize the theme
_See this in action at the Svelte REPL!_
[Link](https://svelte.dev/repl/dbe96ccc7e974dee80ce57a45d17ae2e?version=3.44.2)
```html
import FlatList from 'svelte-flatlist';
let visible;
const items = [0,1,2,3,4,5];
function handleClose(){
visible = false;
}
(visible=true)}>
Click me!
item 1
item 2
item 3
item 4
item 5
```
## Manually list items
_See this in action at the Svelte REPL!_
[Link](https://svelte.dev/repl/dbe96ccc7e974dee80ce57a45d17ae2e?version=3)
```html
import FlatList from 'svelte-flatlist';
let visible;
function handleClose(){
visible = false;
}
(visible=true)}>
Click me!
item 1
item 2
item 3
item 4
```
## 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:
```html
```
### ```style``` Type
The type of the ```style``` prop:
```typescript
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 |