{"id":14962751,"url":"https://github.com/snuffydev/svelte-flatlist","last_synced_at":"2025-06-26T01:33:37.047Z","repository":{"id":57375213,"uuid":"431797073","full_name":"snuffyDev/svelte-flatlist","owner":"snuffyDev","description":"A draggable, customizable, mobile-friendly menu that's simple and easy to use.","archived":false,"fork":false,"pushed_at":"2021-12-20T16:04:37.000Z","size":25,"stargazers_count":16,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T00:32:50.257Z","etag":null,"topics":["draggable","drawer","flatlist","menu","mobile","svelte","svelte-component","svelte-components","sveltejs"],"latest_commit_sha":null,"homepage":"http://svelte-flatlist.netlify.app/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/snuffyDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-25T10:06:03.000Z","updated_at":"2024-08-02T15:10:15.000Z","dependencies_parsed_at":"2022-09-05T14:11:23.798Z","dependency_job_id":null,"html_url":"https://github.com/snuffyDev/svelte-flatlist","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snuffyDev%2Fsvelte-flatlist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snuffyDev%2Fsvelte-flatlist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snuffyDev%2Fsvelte-flatlist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snuffyDev%2Fsvelte-flatlist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/snuffyDev","download_url":"https://codeload.github.com/snuffyDev/svelte-flatlist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238046847,"owners_count":19407625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["draggable","drawer","flatlist","menu","mobile","svelte","svelte-component","svelte-components","sveltejs"],"created_at":"2024-09-24T13:30:27.839Z","updated_at":"2025-02-10T02:32:43.249Z","avatar_url":"https://github.com/snuffyDev.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte FlatList\n\nA mobile-friendly, simple, and customizable draggable menu.\n\n**Documentation / Demo site**: https://svelte-flatlist.netlify.app/\n\n[Find me on NPM!](https://www.npmjs.com/package/svelte-flatlist)\n\n## Demo\n\n[Demo/Docs](https://svelte-flatlist.netlify.app/)\n[REPL](https://svelte.dev/repl/b1b6b42ca4c944ca99f0063d5ca1ccdb?version=3.44.2)\n\n### Installation\n\n`npm install -D svelte-flatlist`\n\n# Usage\n\nUsing Svelte FlatList is very simple. Below are some usage examples.\n\n## Each Block\n\n_See this in action at the Svelte REPL!_\n[Link](https://svelte.dev/repl/2cfb8d8b8ff2447688874a2e0dacb731?version=3.44.2)\n\n```html\n\u003cscript\u003e\n  import FlatList from 'svelte-flatlist';\n  let visible;\n  const items = [0,1,2,3,4,5];\n\n  function handleClose(){\n    visible = false;\n  }\n\u003c/script\u003e\n\n\u003cbutton on:click={()=\u003e(visible=true)}\u003e\n\tClick me!\n\u003c/button\u003e\n\n\u003cFlatList on:close={handleClose} bind:visible\u003e\n  {#each items as item}\n    \u003cspan\u003e{item}\u003c/span\u003e\n  {/each}\n\u003c/FlatList\u003e\n```\n\n## Customize the theme\n\n_See this in action at the Svelte REPL!_\n[Link](https://svelte.dev/repl/dbe96ccc7e974dee80ce57a45d17ae2e?version=3.44.2)\n\n```html\n\u003cscript\u003e\n  import FlatList from 'svelte-flatlist';\n  let visible;\n  const items = [0,1,2,3,4,5];\n\n  function handleClose(){\n    visible = false;\n  }\n\u003c/script\u003e\n\n\u003cbutton on:click={()=\u003e(visible=true)}\u003e\n\tClick me!\n\u003c/button\u003e\n\n\u003cFlatList style={{bgColor: '#424242', handle: {fgColor:'#f2f2f2', height: '2rem', bgColor: '#000000'}}} on:close={handleClose} bind:visible\u003e\n    \u003cspan\u003eitem 1\u003c/span\u003e\n    \u003cspan\u003eitem 2\u003c/span\u003e\n    \u003cspan\u003eitem 3\u003c/span\u003e\n    \u003cspan\u003eitem 4\u003c/span\u003e\n    \u003cspan\u003eitem 5\u003c/span\u003e\n\u003c/FlatList\u003e\n```\n\n## Manually list items\n\n_See this in action at the Svelte REPL!_\n[Link](https://svelte.dev/repl/dbe96ccc7e974dee80ce57a45d17ae2e?version=3)\n\n```html\n\u003cscript\u003e\n  import FlatList from 'svelte-flatlist';\n\n  let visible;\n  function handleClose(){\n    visible = false;\n\t}\n\u003c/script\u003e\n\n\u003cbutton on:click={()=\u003e(visible=true)}\u003e\n\tClick me!\n\u003c/button\u003e\n\n\u003cFlatList bind:visible on:close={handleClose}\u003e\n  \u003cspan\u003eitem 1\u003c/span\u003e\n  \u003cspan\u003eitem 2\u003c/span\u003e\n  \u003cspan\u003eitem 3\u003c/span\u003e\n  \u003cspan\u003eitem 4\u003c/span\u003e\n\u003c/FlatList\u003e\n```\n\n## Props\n\n| Prop     | Description                                                                 |\n| -------- | --------------------------------------------------------------------------- |\n| visible  | (REQUIRED) visibility state                                                 |\n| style    | (See below for options) Customize the colors to fit your needs.             |\n| zIndex   | Same as CSS z-index (defaults to 9999)                                      |\n| position | Position of the list on screen (defaults to 'center')                       |\n| duration | Duration of the opening \u0026 closing transition (defaults to 400)              |\n| maxWidth | Maximum width of the list - must include a CSS unit (defaults to 640px)     |\n| gap      | Gap in between list items - must include a CSS unit (defaults to 0.8rem)    |\n| overflow | Behavior for vertical overflow, same as CSS overflow-y (defaults to 'auto') |\n\n## Style Properties\n\nSvelte-Flatlist allows you to modify the styles to fit your needs best using `style` prop.\n\nExample:\n\n```html\n\u003cFlatlist\n  style={{\n    bgColor: \"#424242\",\n    handle: {\n      height: \"3rem\",\n      bgColor: \"#121212\",\n      fgColor: \"#fefefe\"\n    }\n  }}\n\u003e\n```\n\n### ```style``` Type\n\nThe type of the ```style``` prop:\n\n```typescript\ntype ListStyle = {\n  bgColor?: string;\n  handle?: HandleStyle;\n};\n\ntype HandleStyle = {\n  bgColor?: string;\n  fgColor?: string;\n  height?: string;\n};\n```\n\n### More Info\n\n\n| Style Props | Description                                          |\n| ----------- | ---------------------------------------------------- |\n| bgColor     | Base background color                                |\n| handle      | (see below for options) Color options for the handle |\n\n\u003cbr/\u003e\n\n| Handle Properties | Description                |\n| ----------------- | -------------------------- |\n| bgColor           | Handle background color    |\n| fgColor           | Handle foreground color    |\n| height            | Handle height (ex: '5rem') |\n\n## Events\n\n| Event | Description                     |\n| ----- | ------------------------------- |\n| close | Event fires when list is closed |\n\n## Events\n\n| Event | Description                     |\n| ----- | ------------------------------- |\n| close | Event fires when list is closed |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnuffydev%2Fsvelte-flatlist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnuffydev%2Fsvelte-flatlist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnuffydev%2Fsvelte-flatlist/lists"}