SPanelComponent

This component specify a panel that can be opened and closed with positions like "top", "right", "bottom", "left" or "modal". It has multiple systems to open and close panels depending on your needs and can be programatically manipulated.

Platform  
html
   â”‚    Support  
Chromium supported
Firefox supported
Safari supported
Edge supported
Since  2.0.0
   â”‚   
Olivier Bossel
Olivier Bossel
   â”‚   
beta

  Preview

Simple top panel

 

Loading code example. Please wait...

Simple right panel

Hello world

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus magna. Ut vehicula eros a sapien egestas, sed ultricies orci lacinia. In hac habitasse platea dictumst. Nulla metus elit, mollis at ante id, varius faucibus nulla. Praesent aliquam justo vel justo accumsan, non dictum lorem porta. Donec varius magna id semper pulvinar. Nunc ultrices pellentesque mollis. Mauris vestibulum justo in facilisis tempor. Nunc gravida dictum ex ut condimentum. Aenean sagittis dignissim semper.

or click outside or use the escape key...
 

Loading code example. Please wait...

Simple bottom panel

Hello world

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus magna. Ut vehicula eros a sapien egestas, sed ultricies orci lacinia. In hac habitasse platea dictumst. Nulla metus elit, mollis at ante id, varius faucibus nulla. Praesent aliquam justo vel justo accumsan, non dictum lorem porta. Donec varius magna id semper pulvinar. Nunc ultrices pellentesque mollis. Mauris vestibulum justo in facilisis tempor. Nunc gravida dictum ex ut condimentum. Aenean sagittis dignissim semper.

or click outside or use the escape key...
 

Loading code example. Please wait...

Simple left panel

Hello world

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus magna. Ut vehicula eros a sapien egestas, sed ultricies orci lacinia. In hac habitasse platea dictumst. Nulla metus elit, mollis at ante id, varius faucibus nulla. Praesent aliquam justo vel justo accumsan, non dictum lorem porta. Donec varius magna id semper pulvinar. Nunc ultrices pellentesque mollis. Mauris vestibulum justo in facilisis tempor. Nunc gravida dictum ex ut condimentum. Aenean sagittis dignissim semper.

or click outside or use the escape key...
 

Loading code example. Please wait...

Simple modal panel

Hello world

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus magna. Ut vehicula eros a sapien egestas, sed ultricies orci lacinia. In hac habitasse platea dictumst. Nulla metus elit, mollis at ante id, varius faucibus nulla. Praesent aliquam justo vel justo accumsan, non dictum lorem porta. Donec varius magna id semper pulvinar. Nunc ultrices pellentesque mollis. Mauris vestibulum justo in facilisis tempor. Nunc gravida dictum ex ut condimentum. Aenean sagittis dignissim semper.

or click outside or use the escape key...
 

Loading code example. Please wait...

Modal panel closable only with button

Hello world

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus magna. Ut vehicula eros a sapien egestas, sed ultricies orci lacinia. In hac habitasse platea dictumst. Nulla metus elit, mollis at ante id, varius faucibus nulla. Praesent aliquam justo vel justo accumsan, non dictum lorem porta. Donec varius magna id semper pulvinar. Nunc ultrices pellentesque mollis. Mauris vestibulum justo in facilisis tempor. Nunc gravida dictum ex ut condimentum. Aenean sagittis dignissim semper.
 

Loading code example. Please wait...

Modal panel closable on event

Login

Forgot password?
 

Loading code example. Please wait...

  Features

  • Exteremely customizable

  • Support multiple positions like "top", "right", "bottom", "left" or "modal"

  • Easy system to open the modal you want directly from a button, etc...

  • Set an id on your modal and use the "s-panel-open" and "s-panel-close" attribute on any HTMLElement to open/close it

  • Dispatch some events when the panel is opened or closed

  Import

  Install

  Events

  1. s-panel.open

    Dispatched when the panel is opened

  2. s-panel.close

    Dispatched when the panel is closed

  Interface

  1. position
    modal
    • top
    • left
    • bottom
    • right
    • modal
    String

    Specify the side where to display the panel. Can be "top","left","bottom" or "right"

  2. active
    false
    Boolean

    Specify the panel initial state

  3. backdrop
    false
    Boolean

    Specify if you want an "backdrop" between the panel and your content

  4. triggerer
    String

    Specify a css selector that targets the elements in your UI you want to open the panel on click

  5. closeOn
    ["click","escape"]
    • click
    • escape
    Array<String>

    Specify which "action(s)" close the panel. Valid values are "click" or/and "escape" or/and "event:%eventName". When using the "event:", the listener will be the node itself by default but you can specify the "document" like so "event:%eventName:document

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Designed and built with all the love in the world +1 by the Coffeekraken team with the help of our friends and partners.

Under MIT License

Current version: 2.0.0-alpha.25

Links

  1. Get Started
  2. Documentation
  3. Styleguide
  4. API

Usefull

  1. NPM Packages
  2. Start using the CLI
  3. Start with theming

Community

  1. Join us on Discord
  2. Issues on Github
  3. Support us on Patreon
  4. Our contributors

In collaboration with

Join us on Discord!

Welcome on