https://github.com/jeffreyquan/slide-panel
Slide Panel Web Component
https://github.com/jeffreyquan/slide-panel
javascript rollup scss typescript web-components
Last synced: 8 months ago
JSON representation
Slide Panel Web Component
- Host: GitHub
- URL: https://github.com/jeffreyquan/slide-panel
- Owner: jeffreyquan
- License: mit
- Created: 2021-02-19T10:59:44.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-29T05:45:39.000Z (almost 5 years ago)
- Last Synced: 2024-04-25T06:42:35.177Z (about 2 years ago)
- Topics: javascript, rollup, scss, typescript, web-components
- Language: TypeScript
- Homepage: https://slide-panel.netlify.app/
- Size: 125 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/slide-panel)
[](https://www.webcomponents.org/element/slide-panel)
# slide-panel
`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
or in plain HTML.
Features:
- Slide panel that can open from the left, right, top or bottom
- Press ESC key to close the panel
- Custom events are emitted on opening and closing the panel
## Demo
### HTML
Visit the [CodePen](https://codepen.io/jeffreyquan/pen/yLVXbEa) for an example of usage in plain HTML.
### React
Visit this [Code Sandbox](https://codesandbox.io/s/slide-panel-yejbt) for an example of usage in React.
## Installation
### Option 1 - HTML
Add the following script tag to your `index.html`:
```
```
### Option 2 - React, Angular or Vue
Install the package to your project:
```
npm install slide-panel
```
Add the following in your entry file e.g. `index.js`:
```
import "slide-panel"
```
## Usage
Use the `slide-panel` tag and add the contents of the panel within `
` tags.
Add `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.
Add `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.
The `open` property is used to determine whether the panel is opened or closed.
```html
Open Panel
const btn = document.querySelector("#btn");
const panel = document.querySelector(".panel");
btn.addEventListener("click", (event) => {
panel.setAttribute("open", "true");
});
```
### Props
| Prop | Type | Default | Description |
| -------------------- | ------------------------------------------------------- | --------------------------- | ------------------------------------------------- |
| `open` | `"true" \| "false"` | `"false"` (panel is closed) | Whether the panel is opened or closed. |
| `position` | `"left" \| "right" \| "top" \| "bottom"` | `"left"` | Where the panel opens from. |
| `transitionDuration` | Number enclosed in strings in milliseconds e.g. `"500"` | `"300"` | Transition duration of opening and closing panel. |
### Events
`slide-panel-open` is a Custom Event that is emitted when the panel opens.
`slide-panel-close` is a Custom Event that is emitted when the panel closes.
An event listener can be added to the panel to listen to these Custom Events. Continuing on from the previous example:
```html
panel.addEventListener("slide-panel-open", (event) => {
console.log("Slide Panel Opening 🚀");
});
```
### Styling
`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.
To 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.
```css
.panel {
--slide-panel-root-z-index: 1200;
--slide-panel-panel-z-index: 1000;
--slide-panel-backdrop-background-color: rgba(0, 0, 0, 0.5);
--slide-panel-background-color: #ffffff;
--slide-panel-box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 20%), 0px 4px 6px 1px
rgba(0, 0, 0, 14%), 0px 3px 8px 1px rgba(0, 0, 0, 12%);
--slide-panel-transition-timing-function: ease-in-out;
}
```
## Contributing
If you would like to contribute, please follow the instructions below:
1. Fork the repo
2. Run `npm install`
3. Create a feature branch: `git checkout -b feature/feature-name`
4. Commit your changes: `git commit -am "Added feature"`
5. Push to the branch: `git push origin feature/feature-name`
6. Submit a Pull Request
## Development
Run the following commands after cloning the repo.
```sh
npm install
npm run start
```
Make changes in the `style.scss` and the `SlidePanel.ts` file in the `src` directory.
## License
MIT