Slide Panel

Introduction

slide-panel is a slide panel web component. It can be used in any library/framework or in plain HTML.

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilise them in your web apps, according to the MDN.

I've published this package on NPM.

Features include:

• 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

Motivation

My motivation for this project was to experiment with and learn more about web components. Many UI component frameworks have a slide panel component; I wanted to build one that was framework/library agnostic.

Getting Start

Refer to the GitHub Repo for instructions on how to use the slide-panel package.

Demo

• slide-panel in HTML
• slide-panel in React

Tech

Links

• GitHub Repo
• Demo
• NPM Package
• Web Components
• MDN Web Components