Grid

The grid control in Brizy enables users to arrange other options in a structured grid format, providing a clean and organized layout. Customize the number of columns, adjust spacing, and ensure responsive design for all devices. Ideal for creating balanced and visually appealing designs.

Example of the grid control that arrange two other controls in a grid format:

With separator:

Without separator:

Parameters

Name	Type	Default	Description
id	string	-	The unique identifier to delimit the grid control
type	string	-	Type should be "grid" to use this control.
position?	number	-	The position of the control in toolbar.
className?	string	-	The custom CSS class name that will be set on the control. It can be used to modify the control styles.
roles?	Array<Role>	-	Render the control only if the current user's role matches one of the roles in the provided array. type Role = "admin" | "viewer" | "editor" | "designer" | "manager"
devices?	"all" | "desktop" | "responsive"	"all"	Define the devices where the control will be rendered. "all" renders the control on all devices. "desktop" renders the control only on desktop devices. "responsive" renders the control on both tablet and mobile devices.
disabled?	boolean	false	Configure the condition under which the control is disabled or enabled.
columns	Array<ColumnItem>	-	Defines the number and configuration of columns in the grid layout. Each column is represented by an object. ColumnItem : { id: string, size?: 1 | 2 | 3 | 4 | 5 | 6 | "auto", align?: "start" | "end" | "center", options: ControlItem[], className?: string } id - the unique identifier for each individual column size - defines the size of the column in grid layout. align - Specifies the alignment of the column item within its grid cell. className - defines the CSS class or classes to be applied to the column options - an array of objects representing the content associated with each column ControlItem: { id: string; type: string; title?: string; label?: string; position?: number; } id - this property uniquely identifies each control item and is derived from a saved option value. It represents an identifier associated with a specific configuration or option selected title - the title displayed on the control, representing the content section associated with that Column Item label - an additional label or description for the control, providing further context or information about the content section it represents position - specifies the position of the control within the Column Item type - type of control
config?.separator	boolean	false	If the value is true then a separator will be applied between the columns.

Basic example

In this example, we implemented the grid control that have two columns each of column render a different control.

const getToolbarItems = () => {
  return [
    {
      id: "grid-control",
      type: "grid",
      columns: [
        {
          id: "grid-settings",
          size: 1,
          options: [
            {
              id: "styles",
              type: "sidebarTabsButton"
            }
          ]
        },
        {
          id: "grid-effects",
          size: 1,
          options: [
            {
              id: "effects",
              type: "sidebarTabsButton"
            }
          ]
        }
      ]
    }
  ];
};

Return value

This control does not return any value.

Usage

Class name example

Adding a CSS class to the control's DOM node.

{
  id: "gridControl",
  type: "grid"
  className: "grid-control"
}

Roles example

Show the control only to users with admin and designer privileges.

{
  id: "gridControl",
  type: "grid",
  roles: ["admin", "designer"]
}

Devices examples

It will be rendered on all devices. This value can be skipped because it is set to "all" by default.

{
  id: "gridControl",
  type: "grid",
  devices: "all"
}

Rendering will occur only on desktop.

{
  id: "gridControl",
  type: "grid",
  devices: "desktop"
}

The display is limited to responsive modes, specifically tablet and mobile.

{
  id: "gridControl",
  type: "grid",
  devices: "responsive"
}

Disabled examples

Control will be disabled. Normally, here should be your dynamic condition.

{
  id: "gridControl",
  type: "grid",
  disabled: true
}

Control will be disabled when videoType variable will be "custom". getValue is a getter function that allows us to retrieve the value of controls by their id. "videoType" is the id of the "select" control below.

const getToolbarContols = ({ getValue }) => {
  const videoType = getValue("videoType");

  return [
    {
      id: "videoType",
      type: "select",
      choices: [
        { title: "Youtube", value: "youtube" },
        { title: "Custom", value: "custom" }
      ]
    },
    {
      id: "gridControl",
      type: "grid",
      disabled: videoType === "custom",
      columns: [
        {
          id: "grid-settings",
          size: 1,
          options: [
            {
              id: "styles",
              type: "sidebarTabsButton"
            }
          ]
        },
        {
          id: "grid-effects",
          size: 1,
          options: [
            {
              id: "effects",
              type: "sidebarTabsButton"
            }
          ]
        }
      ]
    }
  ]
}

Config separator example

In this example, we implemented the grid control that have two columns divided by a separator.

{
  id: "grid-group",
  type: "grid",
  config: {
    separator: true
  },
  columns: [
    {
      id: "grid-settings",
      size: 1,
      options: [
        {
          id: "styles",
          type: "sidebarTabsButton"
        }
      ]
    },
    {
      id: "grid-effects",
      size: 1,
      options: [
        {
          id: "effects",
          type: "sidebarTabsButton"
        }
      ]
    }
  ]
};