Panel JSTwig
The Panel
component extends the Modal
component to create slide-in panels from any edge of the screen with smooth animations.
Table of content
Usage
Once the package installed, simply include the template in your project:
js
import { Base, createApp } from '@studiometa/js-toolkit';
import { Panel } from '@studiometa/ui';
class App extends Base {
static config = {
name: 'App',
components: {
Panel,
},
};
}
export default createApp(App, document.body);
twig
{% include '@ui/Panel/Panel.twig' with {
position: 'right',
content: 'Your panel content here'
} %}
Features
- Four Positions: Slide in from top, right, bottom, or left
- Smooth Animations: CSS transitions for opening and closing
- Modal Inheritance: All Modal features including accessibility and keyboard navigation
- Responsive: Adapts to different screen sizes
- Customizable: Full control over styling and positioning
- Overlay: Semi-transparent background overlay with fade animation