{"repo":"timelessco/js-bottomsheet","free":true,"listed":false,"github":"https://github.com/timelessco/js-bottomsheet","clone":"git clone https://github.com/timelessco/js-bottomsheet.git","description":"A pure Js snappable, scrollable, customisable bottomsheet!","language":"JavaScript","stars":42,"topics":["js","library","production","template","vanilla"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"Js Bottomsheet A pure Js snappable, scrollable, customisable bottomsheet! Features - Works as a bottomsheet in mobile and as a modal or sidesheet in web. - Supports multiple snap points. - Uses spring animations. - Supports stacking of bottomsheets. - Is scrollable at the last snappoint. - Supports dynamic content. - Sidesheets are resizable. Dependencies: 1. Use Gesture: https://use-gesture.netlify.app/docs/#vanilla-javascript 2. Anime js: https://animejs.com/ Installation npm: Usage Here's a simple usage of the bottomsheet with static content. HTML: The trigger should have an ID which would be used in the initialisation of the bottomsheet, and a data attribute containing the ID referring to it's corresponding bottomsheet data-bottomsheet-id=[id] . The bottomsheet should have the ID as well as the data attribute data-bottomsheet JS: This would create a simple bottomsheet with the default props. Props: properties that are common for all layouts - bottomsheet, modal and sidesheet trigger: The Id of the trigger element. Type: string content: Content needn't always be a DOM element, it could be passed in dynamically too, as a string. Type: string eg: headerContent: The content that needs to remain fixed at the top of the sheet. It should have a class of 'header'. Type: string eg: footerContent: The content that needs to remain fixed at the bottom of the sheet. It should have a class of 'footer'. Type: string eg: displayOverlay: A boolean defining whether to display an overlay or","default_branch":null,"files":null,"tree":[],"storefront":"/r/timelessco","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/timelessco/js-bottomsheet/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}