{"id":20489298,"url":"https://github.com/jeffreyquan/slide-panel","last_synced_at":"2025-10-30T23:12:39.942Z","repository":{"id":47495083,"uuid":"340342051","full_name":"jeffreyquan/slide-panel","owner":"jeffreyquan","description":"Slide Panel Web Component","archived":false,"fork":false,"pushed_at":"2021-08-29T05:45:39.000Z","size":128,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-25T06:42:35.177Z","etag":null,"topics":["javascript","rollup","scss","typescript","web-components"],"latest_commit_sha":null,"homepage":"https://slide-panel.netlify.app/","language":"TypeScript","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/jeffreyquan.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":"2021-02-19T10:59:44.000Z","updated_at":"2023-10-07T10:57:59.000Z","dependencies_parsed_at":"2022-08-03T08:00:10.018Z","dependency_job_id":null,"html_url":"https://github.com/jeffreyquan/slide-panel","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreyquan%2Fslide-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreyquan%2Fslide-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreyquan%2Fslide-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreyquan%2Fslide-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeffreyquan","download_url":"https://codeload.github.com/jeffreyquan/slide-panel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242067712,"owners_count":20066751,"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":["javascript","rollup","scss","typescript","web-components"],"created_at":"2024-11-15T17:12:14.039Z","updated_at":"2025-10-30T23:12:34.887Z","avatar_url":"https://github.com/jeffreyquan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm package](https://img.shields.io/npm/v/slide-panel.svg)](https://www.npmjs.com/package/slide-panel)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/slide-panel)\n\n# slide-panel\n\n`slide-panel` is a sliding panel web component that can open from the left, right, top or bottom. It can be used in any library/framework\nor in plain HTML.\n\nFeatures:\n\n- Slide panel that can open from the left, right, top or bottom\n- Press ESC key to close the panel\n- Custom events are emitted on opening and closing the panel\n\n## Demo\n\n### HTML\n\nVisit the [CodePen](https://codepen.io/jeffreyquan/pen/yLVXbEa) for an example of usage in plain HTML.\n\n### React\n\nVisit this [Code Sandbox](https://codesandbox.io/s/slide-panel-yejbt) for an example of usage in React.\n\n## Installation\n\n### Option 1 - HTML\n\nAdd the following script tag to your `index.html`:\n\n```\n\u003cscript src=\"http://unpkg.com/slide-panel/dist/slide-panel.min.js\"\u003e\u003c/script\u003e\n```\n\n### Option 2 - React, Angular or Vue\n\nInstall the package to your project:\n\n```\nnpm install slide-panel\n```\n\nAdd the following in your entry file e.g. `index.js`:\n\n```\nimport \"slide-panel\"\n```\n\n## Usage\n\nUse the `slide-panel` tag and add the contents of the panel within `\u003cdiv\u003e` tags.\n\nAdd `position` with either the following values: `left`, `right`, `top` or `bottom` to set where the panel is sliding in from. If `position` is not included, the panel will slide in from the `left` by default.\n\nAdd `transitionDuration` with a value in milliseconds to set transition duration of the panel closing and opening. If `transitionDuration` is not included, the transition duration will be `300` by default.\n\nThe `open` property is used to determine whether the panel is opened or closed.\n\n```html\n\u003cslide-panel class=\"panel\" transitionDuration=\"500\" position=\"right\"\u003e\n  \u003cdiv\u003e\u003c!-- ADD CONTENT HERE --\u003e\u003c/div\u003e\n\u003c/slide-panel\u003e\n\n\u003cbutton id=\"btn\"\u003eOpen Panel\u003c/button\u003e\n\n\u003cscript\u003e\n  const btn = document.querySelector(\"#btn\");\n  const panel = document.querySelector(\".panel\");\n\n  btn.addEventListener(\"click\", (event) =\u003e {\n    panel.setAttribute(\"open\", \"true\");\n  });\n\u003c/script\u003e\n```\n\n### Props\n\n| Prop                 | Type                                                    | Default                     | Description                                       |\n| -------------------- | ------------------------------------------------------- | --------------------------- | ------------------------------------------------- |\n| `open`               | `\"true\" \\| \"false\"`                                     | `\"false\"` (panel is closed) | Whether the panel is opened or closed.            |\n| `position`           | `\"left\" \\| \"right\" \\| \"top\" \\| \"bottom\"`                | `\"left\"`                    | Where the panel opens from.                       |\n| `transitionDuration` | Number enclosed in strings in milliseconds e.g. `\"500\"` | `\"300\"`                     | Transition duration of opening and closing panel. |\n\n### Events\n\n`slide-panel-open` is a Custom Event that is emitted when the panel opens.\n\n`slide-panel-close` is a Custom Event that is emitted when the panel closes.\n\nAn event listener can be added to the panel to listen to these Custom Events. Continuing on from the previous example:\n\n```html\n\u003cscript\u003e\n  panel.addEventListener(\"slide-panel-open\", (event) =\u003e {\n    console.log(\"Slide Panel Opening 🚀\");\n  });\n\u003c/script\u003e\n```\n\n### Styling\n\n`slide-panel` utilises CSS variables that help style the component. These can be overridden to adjust the styling. The amount of styling is intentionally lean to allow the user to focus on styling the panel.\n\nTo override the CSS variables, it is recommended to add a class to the `slide-panel` tag and define the CSS variables in that class. The values used below are the `default` values.\n\n```css\n.panel {\n  --slide-panel-root-z-index: 1200;\n  --slide-panel-panel-z-index: 1000;\n  --slide-panel-backdrop-background-color: rgba(0, 0, 0, 0.5);\n  --slide-panel-background-color: #ffffff;\n  --slide-panel-box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 20%), 0px 4px 6px 1px\n      rgba(0, 0, 0, 14%), 0px 3px 8px 1px rgba(0, 0, 0, 12%);\n  --slide-panel-transition-timing-function: ease-in-out;\n}\n```\n\n## Contributing\n\nIf you would like to contribute, please follow the instructions below:\n\n1. Fork the repo\n2. Run `npm install`\n3. Create a feature branch: `git checkout -b feature/feature-name`\n4. Commit your changes: `git commit -am \"Added feature\"`\n5. Push to the branch: `git push origin feature/feature-name`\n6. Submit a Pull Request\n\n## Development\n\nRun the following commands after cloning the repo.\n\n```sh\nnpm install\nnpm run start\n```\n\nMake changes in the `style.scss` and the `SlidePanel.ts` file in the `src` directory.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffreyquan%2Fslide-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeffreyquan%2Fslide-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffreyquan%2Fslide-panel/lists"}