Grid Layout Builder

import { AXGridLayoutBuilderModule } from '@acorex/components/grid-layout-builder';

A Grid Layout Builder component allows users to visually design and customize grid-based layouts by arranging and resizing elements within a defined grid structure.

This Component uses GridStack as dependency!

Overview

In this section, you can test different options of this component and see the output in real time

Grid Items

Test

Grid Container

Widget 1

Widget 2

Deletion Area:

Column Counts

Manage Items

Features

Disable Move

Disable Resize

Usage

A simple example of using ax-grid-layout-builder

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-grid-layout-container-border-color	var(--ax-sys-color-border-surface)	Border color of the grid layout container. Defaults to the system's border color.
--ax-comp-grid-layout-container-bg-color	var(--ax-sys-color-lighter-surface)	Background color of the grid layout container. Defaults to the system's body background color.
--ax-comp-grid-layout-stack-item-content-bg-color	var(--ax-sys-color-surface)	Background color of the grid stack item content. Defaults to the system's surface background color.
--ax-comp-grid-layout-stack-item-content-border-color	var(--ax-sys-border-color)	Border color of the grid stack item content. Defaults to the system's border color.
--ax-comp-grid-layout-container-border-width	1px	Border width of the grid layout container.
--ax-comp-grid-layout-container-border-style	solid	Border style of the grid layout container (e.g., solid, dashed, dotted).
--ax-comp-grid-layout-stack-item-border-radius	var(--ax-sys-border-radius)	Border radius of the grid stack items. Defaults to the system's border radius.
--ax-comp-grid-layout-stack-item-content-border-radius	var(--ax-sys-border-radius)	Border radius of the grid stack item content. Defaults to the system's border radius.
--ax-comp-grid-layout-stack-item-content-border-width	1px	Border width of the grid stack item content.
--ax-comp-grid-layout-stack-item-removing-animation	fadeAndBlur 0.5s linear forwards	Animation applied to grid stack items when they are being removed.
--ax-comp-grid-layout-stack-trash-min-height	120px	Minimum height of the grid stack trash area.
--ax-comp-grid-layout-stack-trash-bg-image	Trash can icon	Background image of the grid stack trash area (used for drag-and-drop removal of items).