Create A Component For A Grid

[whitemedia]

Hi,

With the Component builder in Pro, is it possible to create a Grid component? The area which makes me unsure if it is possible is adding parameters to add a new cell via parameters and to control the X and Y start and ends via parameters.

I am looking to create two Grid components: one which will use a JSON Looper to fill the content; the other to manually add cells as required. Is this possible?

My parameters so far are:

{
	"heading" : {
		"type"   : "group",
		"label"  : "Heading",
		"params" : {
			"content" : {
				"label"       : "Heading",
				"type"        : "text",
				"initial"     : "Your Heading",
				"placeholder" : "e.g. Your Heading"
			},
			"tag" : {
				"type"    : "choose",
				"label"   : "Tag",
				"initial" : "h2",
				"options" : [
					{ "value" : "h1", "label" : "h1" },
					{ "value" : "h2", "label" : "h2" },
					{ "value" : "h3", "label" : "h3" },
					{ "value" : "h4", "label" : "h4" },
					{ "value" : "h5", "label" : "h5" },
					{ "value" : "h6", "label" : "h6" },
					{ "value" : "span", "label" : "span" }
				]
			},
			"align" : {
				"label"    : "Align",
				"type"     : "choose",
				"initial"  : "center",
				"offValue" : "none",
				"isVar"    : true,
				"options"  : [
					{ "value" : "left",    "icon" : "ui:text-align-left"    },
					{ "value" : "center",  "icon" : "ui:text-align-center"  },
					{ "value" : "right",   "icon" : "ui:text-align-right"   },
					{ "value" : "justify", "icon" : "ui:text-align-justify" }
				]
			},
      "fontFamily" : {
        "label"   : "Font Family",
        "type"    : "font-family",
        "initial" : "48656164696e677"
      },
      "fontWeight" : {
        "label"    : "Font Weight",
        "type"     : "font-weight",
        "initial"  : "fw-bold"
      },
      "case" : {
				"type"    : "choose",
				"label"   : "Case",
				"initial" : "capitalize",
				"options" : [
					{ "value" : "uppercase", "label" : "TT" },
					{ "value" : "capitalize", "label" : "Tt" },
					{ "value" : "lowercase", "label" : "tt" }
				]
			},
      "fontSize" : {
        "type"   : "group",
        "label"  : "Font Size",
        "noPicker" : true,
        "params" : {
          "desktop" : {
            "label"   : "Desktop",
            "type"    : "font-size",
            "initial" : "2.5em"
          },
          "laptop" : {
            "label"   : "Laptop",
            "type"    : "font-size",
            "initial" : "2.5em"
          },
          "tablet" : {
            "label"   : "Tablet",
            "type"    : "font-size",
            "initial" : "2em"
          },
          "tabletPortrait" : {
            "label"   : "Tablet Portrait",
            "type"    : "font-size",
            "initial" : "2em"
          },
          "mobile" : {
            "label"   : "Mobile",
            "type"    : "font-size",
            "initial" : "1.5em"
          }
        }
      },
      "textColor" : {
        "label"   : "Text",
        "type"    : "color-pair",
        "initial" : {
          "base" : "#ffffff",
          "alt"  : "#ffffff"
        }
      }
    }
  },
  "image"  : {
		"type"    : "group",
		"label"   : "Image",
		"params"  : {
			"image" : {
				"label"       : "Image",
				"type"        : "image",
				"initial"     : "https://www.mydomain.com/wp-content/uploads/Seed-Pods.jpg",
				"height"      : 4
			},
      "position" : {
        "label"   : "Position",
        "type"    : "text",
        "initial" : "50% 50%"
      },
      "alt" : {
				"label"       : "Alt Text",
				"type"        : "text",
				"initial"     : "Name | Writer & Published Author",
				"placeholder" : "e.g. Bowl of Healthy Nettle Soup"
			},
      "link" : {
        "label"   : "Link",
        "type"    : "text",
        "initial" : "#"
      }
    }
  },
  "grid"  : {
		"type"    : "group",
		"label"   : "Grid",
		"params"  : {
			"columns" : {
				"label"       : "Columns",
				"type"        : "text",
				"initial"     : "1fr 1fr 1fr",
				"placeholder" : "e.g. repeat(2, 1fr)"
			},
      "position" : {
        "label"   : "Position",
        "type"    : "text",
        "initial" : "50% 50%"
      }
    }
  }
}

The structure looks like the screenshot below, with the <div> “Grid - Square” being the export prefab.

Thanks,
Christopher

[ruenel]

Hello Christopher,

Thanks for writing in!

The Grid component with a JSON Looper may be possible because the Cells will be generated dynamically. Unlike, the manual adding of Cells which may not be possible.

Best Regards.

[whitemedia]

Hello @ruenel,

Thank you for your reply. That was my thought, but was unsure about for manual adding of Cells. If it is not possible, could this be added to the roadmap / feature request list @charlie / @kory, similar to how Lists can be achieved as Component!

One other question, is it possible to use the isVar option in Parameters to allow Cell X and Y start and ends be different for each of the five screen breakpoints? If so, is there an optimal way of doing this?

Thanks again for your help,
Christopher

[ruenel]

Hello Christopher,

I will forward this thread to @Charlie. He might have something to add or any other ideas as an alternative.

Thanks.