Parent and child in the Tree

In the Tree, a parent container holds child components. The canvas shows the same hierarchy with indentation and drop zones.

This page uses the Event registration example: cards keyed contactSection and ticketSection, each with a Stack and fields inside.

Read the hierarchy

contactSection selected in Tree with the Contact details card highlighted on the canvas.contactSection selected in Tree with the Contact details card highlighted on the canvas.

  1. Open Tree → Expand all.
  2. contactSection (MuiCard) is a parent container; contactStack and its fields are indented underneath it.
  3. Click contactSection to select the whole card frame on the canvas.

Select a child and see it on the canvas

email selected in Tree with the Email field highlighted on the canvas.email selected in Tree with the Email field highlighted on the canvas.

  1. Expand contactSection → contactStack in Tree.
  2. Click email.
  3. The Email field highlights on the canvas at the same time.

Move a misplaced field

phone moved under contactStack in Tree and shown in Contact details on the canvas.phone moved under contactStack in Tree and shown in Contact details on the canvas.

  1. In this example, phone started under ticketStack by mistake.
  2. Drag the phone row in Tree onto a field inside contactStack (for example fullName).
  3. After the move, phone appears under contactStack in Tree and the Phone field appears inside Contact details on the canvas.

Edit a child quickly

email selected in Tree with Key and Label on Main highlighted.email selected in Tree with Key and Label on Main highlighted.
  1. Expand contactSection → contactStack in Tree.
  2. Click email.
  3. Edit Key and Label on Main.

Summary

A parent is a container such as contactSection or contactStack. Its children are fields and nested layout components. Click in Tree to select nested fields, drag rows to move them, and see the matching structure on the canvas.

See also