Arrange Elements

Select an element

Open a View or component and select an item in Hierarchy. Inspector shows its source, attributes, bindings, and measured layout. Follow its source link to edit the element or its styles.

Hierarchy lists every element in the open source, indented to match its nesting, with static classes shown in muted text beside each name; the selected section.panel.panel--menu row above is one example. A component instance such as Button or SquareButton gets a diamond icon so it is easy to tell apart from a plain markup element.

Add, move, or remove content

Selecting a row shows its reorder arrows and delete button in the Hierarchy header's toolbar. The arrows move the selected element up or down among its siblings; the delete button removes it from the source entirely.

• Drag a component from Explorer onto a container in Hierarchy.
• Drag a hierarchy item onto another container to move it.
• Use the Hierarchy header's arrows to reorder the selected item.
• Use a row's delete button to remove that element.

These operations change the source file. Save and inspect the result in Preview. Use Undo if you moved or removed the wrong element.

Change appearance

Edit CSS in the component's <style scoped> section or a loaded global stylesheet. Use Themes for shared colors and spacing. Inspector shows information; it does not write CSS layout, color, or typography declarations.

Content created by a repeating list may be read-only in Hierarchy. Open the owning component source to change the repeated template. See Styling and Conditions and lists.