Groups

In addition to styling components, you can create layouts by grouping elements together. You can group elements by writing the following sentence -

Create group xyz with elements add button and login button.

Here, you can use a word or a set of words in place of xyz and in place of "add button and login button", you can add all the UI components that you want to group together. You can group some groups as well by simply using their names and using the same structure as above. There is no upper limit on the number of elements you can group. So, you can also write -

Create group xyz with elements add button, subtract button, login title text and login button.

When you click on this sentence, the first tab will show you the IDs of all the child components. If we have detected a component incorrectly, you can correct the ID there.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7dcf1a02-cffe-4c46-aef8-a4189036319f/Screenshot_2020-10-08_at_10.08.21_AM.png

In the second tab, you will see styling for the group. A group is basically a flex-box. You can change the following settings of a group -

  1. Alignment along main axis (flex-start | center | flex-end | space-around | space-between)
  2. Alignment along cross axis (flex-start | center | flex-end | space-around | space-between)
  3. Wrap to next line or don't wrap (wrap | nowrap)
  4. Arrange items horizontally or vertically (row | column)
  5. Width of the element (in percentage, px or any other valid CSS unit)
  6. Padding shorthand (top right bottom left)