Skip to main content

UI Layout

Anyui offers simply but powerful layout ability, allowing you to quickly move, resize and copy components to complete the UI design.

Edit components​

Drag and drop a widget from widget bar onto the canvas. Select the component to edit its properties, styles, and events.

Move components​

When moving a component, alignment guide lines will appear near the edges or centers of other components and the canvas, and the component will be automatically attached.

Drag align

Resize components​

When resizing a component, alignment guides will appear near the edges or centers of other components and the canvas, and the component will be automatically attached.

Proportional resizing of components​

Sometimes we want to keep the aspect ratio of a component while resizing it. To do this, hold down the Shift key on the keyboard and then stretch the selected component. This will keep the component's aspect ratio unchanged.

Multi-select componenents​

To select multiple components, hold down the Shift key on the keyboard and click on the components. The selected components will be highlighted in orange, as shown in the image below.

Multi-selection

Alignment​

When multiple components are selected, you can choose an alignment in the properties area to quickly align the components.

Alignment

Duplicate components​

When you need to quickly duplicate components, such as menu items, you can:

  • Click to select the component you want to copy.
  • Hold down the Option/Alt key on the keyboard and drag the component to the location where you want to copy it.