Design view
The Design view enables you to build and configure your application UI. To learn more about available features in the the Design view, see the following pages:
This page provides an overview of the following Design view panels:
For information on the configuration panels that appear in both workspaces, see the following pages:
The Preview panel displays your application UI and enables you to configure the design by dragging components from the Libraries panel and arranging them as needed.
The toolbar at the top of the Preview panel includes several display controls:
- Desktop, Tablet, Phone horizontal, and Phone vertical: Sets the Preview panel's size and aspect ratio based on the selected platform and orientation.
- Width: Sets the app's width (in pixels).
- Zoom: Zooms the display in or out.
To quickly locate a component in your user interface, select it in the Explorer panel's Design Layers section. This highlights and selects the corresponding component in the Preview panel.
Note: When you drag-and-drop components within the Design Layers section, they also rearrange within the containing parent object. Depending on the parent’s Mode setting, components reorder from left to right and/or top to bottom. For more information, see Layers.
The Inspector panel displays configuration options for the page or component you select. When you select a component, the Inspector panel displays the following tabs:
- Styles: Enables you to configure visual properties for the selected component (e.g., size, layout, padding).
- State: Enables you to configure stateful properties for the selected component (e.g., value, label, data).
Note: The Styles and State configuration menus are also available from the quick selection menu. For more information, see Quick selection menu.
When you select a page in the Explorer panel, the Inspector panel displays a Properties page that enables you to view and configure page information.
Last modified 6d ago