@brightyard/wappler-gridstack v0.0.2
GridStack Extension for Wappler
This GridStack extension integrates a responsive and interactive grid layout system within Wappler. It enables dynamic, draggable, and resizable grid items, making it easy to build customizable dashboards and interfaces.
Note: This extension is not ready for production and is exposed for other Wapplers to review and suggest improvements.
Installation
1. Install the Package
Follow this guide to copy the necessary files to your Wappler project's extensions folder.
2. Add the Component to Wappler
You can add the custom GridStack component to your Wappler project by following these steps:
Include the GridStack Component:
In Wappler's App Structure panel, add the GridStack component to your page:
<dmx-gridstack id="dashboardGrid" columns="12" cell-height="100" margin="10"></dmx-gridstack>
Features
Responsive Layouts
Define column configurations for different screen sizes. The component dynamically adjusts based on the window size.
Draggable and Resizable Items
Items within the grid are fully draggable and resizable, allowing users to customize layouts.
Dynamic Widget Management
Add or remove grid items dynamically using Wappler's dynamic events.
<button dmx-on:click="dashboardGrid.addWidgetWithChart({ w: 4, h: 2, content: '<canvas></canvas>', chartConfig: chartConfigVar })"> Add Chart Widget </button>
Configuration Options
| Property | Description | Default Value |
|---|---|---|
columns | Number of columns in the grid | 12 |
cell-height | Height of each cell in pixels or 'auto' | 100px |
margin | Margin between grid items | 10px |
animate | Enables smooth animations when resizing/moving | true |
staticGrid | Makes the grid static, disabling drag and resize | false |
Example Usage
<dmx-gridstack id="dashboardGrid" columns="12" cell-height="100" margin="10">
<div class="grid-stack-item" id="widget1" gs-w="4" gs-h="2" gs-x="0" gs-y="0">
<div class="grid-stack-item-content">
<dmx-chartjs
id="chart1"
type="bar"
dmx-bind:data="serverConnect1.data.chartData"
dmx-bind:labels="['January', 'February', 'March']"
></dmx-chartjs>
</div>
</div>
</dmx-gridstack>License
MIT License. Please feel free to use and modify this component as needed.