{"id":18247033,"url":"https://github.com/frontle-foundation/bottomsheet","last_synced_at":"2025-04-04T14:31:27.352Z","repository":{"id":65409337,"uuid":"563476070","full_name":"Frontle-Foundation/BottomSheet","owner":"Frontle-Foundation","description":"Bottom sheet UI available in Vanilla JS","archived":false,"fork":false,"pushed_at":"2023-01-03T19:14:55.000Z","size":110,"stargazers_count":10,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T18:51:53.531Z","etag":null,"topics":["bottom-sheet","bottomsheet","frontle","javascript","modal","sheet","vanilla-javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Frontle-Foundation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-08T17:35:43.000Z","updated_at":"2025-01-24T15:09:29.000Z","dependencies_parsed_at":"2023-02-01T09:01:19.117Z","dependency_job_id":null,"html_url":"https://github.com/Frontle-Foundation/BottomSheet","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontle-Foundation%2FBottomSheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontle-Foundation%2FBottomSheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontle-Foundation%2FBottomSheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontle-Foundation%2FBottomSheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Frontle-Foundation","download_url":"https://codeload.github.com/Frontle-Foundation/BottomSheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247194030,"owners_count":20899416,"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":["bottom-sheet","bottomsheet","frontle","javascript","modal","sheet","vanilla-javascript"],"created_at":"2024-11-05T09:28:44.496Z","updated_at":"2025-04-04T14:31:27.026Z","avatar_url":"https://github.com/Frontle-Foundation.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://frontle.org/\" target=\"blank\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/49587288/209550001-97ccc567-f9d9-4f47-affe-7abccb3967e6.png\" width=\"120\" alt=\"Frontle Logo\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n  \u003cp align=\"center\"\u003eThe easiest multi-platform SPA framework.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/~frontle\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@frontle/bottomsheet.svg\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/~frontle\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@frontle/bottomsheet.svg\" alt=\"Package License\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/~frontle\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@frontle/bottomsheet.svg\" alt=\"NPM Downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Description\n\nBottom sheet UI available in Vanilla JS\n\n![bottomSheetGif](https://frontle.org/uploads/bottomSheetReadme/bottomSheet.gif)\n\n## Usage\n\n```javascript\nimport { BottomSheet } from \"../../browser_modules/@frontle/bottomsheet/index.js\";\n\nconst bottomSheet = new BottomSheet(\n  \"#app\",\n  '\u003cbutton id=\"closeButton\"\u003eclose\u003c/button\u003e'\n);\nbottomSheet.height = 100;\nbottomSheet.startY = -50;\nbottomSheet.beforeOpen = (sheetId) =\u003e {\n  document.querySelector(\"#closeButton\").onclick = () =\u003e {\n    bottomSheet.close(sheetId);\n  };\n};\nbottomSheet.open();\n```\n\n## Install\n\n**Frontle**\n\n```shell\n$ frontle install @frontle/bottomsheet --noBuild\n```\n\n**Vanilla JS**\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@frontle/bottomsheet@1.0.3/dist/frontle_bottomsheet.min.js\"\u003e\u003c/script\u003e\n\u003c!-- sourcemap \nhttps://cdn.jsdelivr.net/npm/@frontle/bottomsheet@1.0.3/dist/frontle_bottomsheet.min.js.map\n--\u003e\n```\n\n## API\n\n#### new BottomSheet(parents, html)\n\nCreate a bottom sheet object\n\n```javascript\nconst bottomSheet = new BottomSheet(\n  \"#app\",\n  '\u003cbutton id=\"closeButton\"\u003eclose\u003c/button\u003e'\n);\n```\n\n#### .sheetClass \n\n#### .contentsClass \n\n#### .backgroundClass\n\nSet the css class of a bottom sheet\n\n```javascript\nbottomSheet.sheetClass = 'cssClassName';\nbottomSheet.contentsClass = 'cssClassName1 cssClassName2';\nbottomSheet.backgroundClass = '';\n```\n\n#### .height\n\nSet bottom sheet height\n\n```javascript\nbottomSheet.height = 50;\n```\n\n#### .startY\n\nSet bottom sheet start y position\n\n```javascript\nbottomSheet.startY = 0;\n```\n\n#### .backgroundClickExit\n\nSet whether bottom sheet can be closed by clicking on bottom sheet background\n\n```javascript\nbottomSheet.backgroundClickExit = true;\n```\n\n#### .beforeOpen\n\nThis lifecycle is executed before the bottom sheet is opened\n\n```javascript\nbottomSheet.beforeOpen = (sheetID) =\u003e { console.log('before opened') }\n```\n\n#### .afterOpen\n\nThis lifecycle is executed after the bottom sheet is opened\n\n```javascript\nbottomSheet.afterOpen = (sheetID) =\u003e { console.log('after opened') }\n```\n\n#### .beforeEnd\n\nThis lifecycle is executed before the bottom sheet closes\n\n```javascript\nbottomSheet.beforeEnd = (sheetID) =\u003e { console.log('before closed') }\n```\n\n#### .afterEnd\n\nThis lifecycle is executed after the bottom sheet is closed\n\n```javascript\nbottomSheet.afterEnd = (sheetID) =\u003e { console.log('after closed') }\n```\n\n#### .open()\n\nOpen bottom sheet\n\n```javascript\nconst sheetID = await bottomSheet.open();\n```\n\n#### .close(sheetID)\n\nClose bottom sheet\n\n```javascript\nawait bottomSheet.close(sheetID);\n```\n\n## People\n\nThe original author of @frontle/bottomsheet is [MushStory](https://github.com/MushStory)\n\n## License\n\n [MIT](https://github.com/Frontle-Foundation/BottomSheet/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontle-foundation%2Fbottomsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontle-foundation%2Fbottomsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontle-foundation%2Fbottomsheet/lists"}