Contents

• Welcome to SigmaVisual
• How to
  • How to install
  • How to add component to my web page
  • How to set component properties
  • How to add new items to a menu/tab/stack
  • How copy components
  • How to remove components
  • How to move components
  • How to resize components
  • How to change components' parent container
  • How to customize appearance
  • How to add an event handler
  • How to know property/event meaning
  • How to preview/execute a web page
  • How to make web application standalone
  • How to change theme of my application
  • How to make app fit different resolutions
• Reference
  • SigmaVisual Overview
  • Main Buttons
  • Design View
    • Design Tool Bar
    • Structure Dropdown Tree
    • Component Gallery
    • Object Inspector
  • Normal View
  • Structure View

Design Tool Bar

Design tool bar looks like following figure.

Select and move component(s)

Before you use design view tool buttons, you need to learn more about how to select one or more components on your page.

Select one component

Click on the component to select it. If you click another component, this component will be un-selected.

Select more than one component

Click on the components with [shift] key pressed. If you want select all the components within a rectangle area, just drag your mouse to draw a rectangle.

Move component(s)

You can drag selected component(s) to anywhere. You can move selected component(s) a little by pressing [up key], [down key], [left key] and [right key]. 

Part One

Serialize to JS code

This command enables you to serialize all selected component(s) to JavaScript source code.

Serialize to JSON code

This command enables you to serialize all selected component(s) to JSON code.

Part Two

Align to left

This command enables you to align the left of all selected components(s).

Align to center

This command enables you to align the center of all selected components(s).

Align to right

This command enables you to align the right of all selected components(s).

Align to top 

This command enables you to align the top of all selected components(s).

Align to middle

This command enables you to align the middle of all selected components(s).

Align to bottom

This command enables you to align the bottom of all selected components(s).

Same width

This command enables you to make all selected components(s) in same width.

Same width and height

This command enables you to make all selected components(s) in same size.

Same height

This command enables you to make all selected components(s) in same height.

Part Three

To top layer 

This command enable you to let all selected components(s) go up and no components overlay them.

To bottom layer

This command enable you to let all selected components(s) go down and every components else overlay them.

Set position to grid

If you click this button, all the selected component(s) will be moved a little and snapped at by background grid dots.

Set size to grid

Click this button to enlarge or reduce all the selected component(s) to make components the same size as rectangles of backgroud grid.

Clone selected component(s)

Click this button to copy selected component(s). Note that those copies overlay old ones.

Delete

Click this button to remove selected component(s).