website logo
HomepageCommunitySign up & Download for free
⌘K
USER MANUAL
User Interface
General
Styling
Color Management
Widgets
Presentation & Interaction
Interactions
Sharing & Export
Resources
JavaScript
Embedded HTML
Custom CSS
Plugins
Cloud
General
Account Registration
Projects
Prototypes
Subscription, Licensing and Billing
Single Sign-On (SSO)
Company Profile
Types of Users
User Management
Commenting
Sharing
Public Link
Embed Code
Prototype Settings
User Profile
FAQ
Tutorials
How to build
Interactive dropdown
Interactive tab bar with content
Modal dialog
Table
Input field
Upload and share prototypes
Changelog
Docs powered by archbee 

Styling

64min

Position

In this area of the style inspector you can define where the elements are positioned on a screen.

If the movable option is unchecked, the object cannot be moved on the canvas with the mouse. If an element is nested, the values are relative to the parent's bounds.

Document image




Note

Positioning with Top and Left is only possible in Free Layout.







Size

The size of screens, widgets and basic elements can be set in the style inspector or style bar. The size can either be set manually or defined automatically. Width and height can be set separately. Three size modes exist in Antetype.

Document image

Document image




Types

Manual

You can set the size of the element directly by resizing it on the canvas or enter the desired value in the style inspector.

Stretch

If set to stretch, the element automatically adapts to the available space of its parent container.

Shrink

If set to shrink, the element automatically adapts to the size of its content. This setting also respects the text of an element.



Additional Properties

Minimum and Maximum

Regardless of the type, a minimum and maximum size can be set.



Note

Resizing with handles on the canvas applies to all states. If you want to change the size only for a specific state, use the Style Inspector.







Automatic Layout

The layout of the screen or basic elements can be set in the style inspector or style bar.

It defines how the element's content is arranged and reacts if the element is resized. Four different layout modes exist in Antetype. In addition, you can set the horizontal and vertical alignment to left, center or right and top, center or bottom.

Document image

Document image


Types

Free

The nested elements can be moved freely on the canvas or you can specify the position in the Style Inspector using Top and Left.

Stacked

The elements are layered above each other. You can change the order by drag and drop in the screen inspector or by pressing the Front/Back buttons in the toolbar.

Horizontal Flow

The elements are placed side-by-side. You can change the position by drag and drop in the screen inspector or on the canvas.

Vertical Flow

The elements are placed one below the other. You can change the position by drag and drop in the screen inspector or on the canvas.

Wrap

If the content of a cell doesn't fit in one line or column, it flows into the next row or column. This property is only available for horizontal or vertical layout.

Gap

Gap specifies the distance between elements in horizontal or vertical layout.

Note

If wrapping is enabled, the elements that don't fit in a row or column, move to the next row or column. Wrapping is only available in horizontal or vertical flow layout. In this case, gap can be specified for the horizontal and vertical axis.

Float

If activated in the style inspector, the element floats, independent of the parent container's layout. Only the padding of the parent container is taken into account. You can specify where the floating element should be located. If set to shrink, the parent container respects the size of the floated element. Additionally, you can enable fixed positioning, which ignores its parent container and aligns itself to the screen.

Document image








Margin and Padding

Margin

When arranging elements using smart guides or if an element is arranged by layout specifications, margins define the distance of an object to another object on the same hierarchical level and to the outlines of its parent container. You can define the margin value for each side of an object by opening the margin section in the style inspector or style bar.

Document image




Padding

Padding defines the distance of nested elements to the outline of the parent container. You can define the padding value for each side of an object individually by opening the padding section in the style inspector or style bar.

Document image




Note

Margin has no effect on cells inside a Free Layout Container. Padding has no effect on Free Layout Containers.







Breakpoints

The breakpoints menu is located in the bottom right corner of the main window inside the Status Bar. By default, no breakpoints are defined. From the menu you can choose "Edit Breakpoints…" to open the breakpoint editor window.

Document image




You can add breakpoints by clicking the + sign. By default the current size of the canvas is used when a new breakpoint is created.

You can choose predefined breakpoints from the menu or create custom breakpoints. Breakpoints can be added, removed and edited at any time.

After adding breakpoints, new states are available for each widget. You can turn on the states in the style inspector to make specific settings for each breakpoint. The states can be activated by choosing breakpoints from the breakpoints menu or resizing the screen.

Document image








Display

This setting of the Style inspector allows you to show and hide elements. You can toggle between visible, hidden, and collapsed.

You can also use the display pop-over from the style bar.

Document image




Types

Hidden

Just makes the element invisible, but the element still affects the layout.

Visible

Shows the element.

Collapsed

Removes the element completely, the layout is not affected.



Additional Properties

Opacity

In addition, the opacity of the element can be changed. All nested elements are also affected by the opacity setting.

Z-Index

You can specify the painting order within a container. Elements with a higher z-index show up above other elements with a lower z-index.

Attention

A nested element can not paint above something if the parent element has a lower z-index. (If a nested element has a higher z-index than the parent element, it has no effect. It is limited by the z-index of the parent element.)

Blur

Blurs the element.

Rotation

Rotates the element.

Blend Mode

A selection of different blend modes.







Rounded Corners

The corner radius can be defined for each corner of a rectangle by opening the rounded corners section in the style inspector or style bar.

Document image

Document image








Border

Border size, color and type can be defined for each side of a rectangle or circle by opening the border section in the style inspector or style bar.

Document image

Document image


You can choose between solid, dotted or dashed border.

For circles, only one border can be defined. If you want a circle with different Borders you can use a Rectangle with Rounded Corners.

Tip

To define a semi-transparent border color use the opacity slider of the color picker.







Background

The background style of a cell can be chosen in the style inspector or via the fill button in the style bar.

Document image




Types

Color

Defines the background color of an element. Click the color well and choose the color from the color picker. Alternatively select a saved color from the list.

For more Information regarding colors see Color Management.

Document image




Tip

To define a semi-transparent background color use the opacity slider of the color picker.



Gradient

With the gradient editor you can define complex gradients with multiple color stops. To create a color stop, click in the color stop area. To delete a color stop, select it and press the backspace key. The stop position can either be changed by dragging or by entering the value in the "Stop Position" field. Values between 0 and 100 are possible. The angle of a linear gradient can be adjusted by entering the value in the "Angle" entry field or by turning the circular slider.

A radial gradient can be displayed if the switch is turned on.

To reverse the gradient, press the button on top of the gradient well.

Document image

Document image


Attention

Color management for gradients is currently not supported.



Image

Images that have been added to the project can be used as background image for the selected element.

Images can either be displayed scaled, in their original size or tiled horizontally or vertically. If Original is selected, the image is shown in its normal size and its alignment can be specified. If the cell size can be changed manually, the "Original Size" button sets the cell size to the dimensions of the image. If the image is scaled, the image proportions can be kept by checking the "Proportional scale" option.

Document image

Document image




Contain and Cover

Switch between covering the containers whole size or containing the image proportions.



Adding Images

Images can be added to the project by clicking the + sign or dragging it to the resource inspector. In addition, images can be dragged from the Finder or web browser to the canvas or pasted from another application. Antetype accepts pixel and vector formats like: PNG, JPEG, GIF, SVG.



Content

This section describes the handling of nested elements.

Document image




Layout Options:

  • Free
  • Stacked
  • Horizontal Flow
  • Vertical Flow

For all layouts, except Free, the horizontal and vertical alignment of the content elements can be specified.

Clip Content

This setting defines whether the content is visible or hidden if it is located outside the parent container’s bounds.

Clip Content is automatically turned on if scrolling is enabled.

Tip

Clip Content should be turned off, if an inner element has a shadow, that should also be visible outside the parent.

Scrollable

This seeting turns on scrolling if the content of a cell exceeds its bounds. Scrolling can be enabled in the vertical, horizontal or both directions.

Mouse Selection

This setting defines whether an element is selectable on the canvas by clicking the element with the mouse.

Tip

Turn mouse selection off, if an element does not need to be selected frequently.



Accept Drops

This setting defines whether elements can be nested within the selected element.



Nested Cells

This option is only available for widgets. It defines whether the nested cells are stored in the widget or not. More information is available in the widget section.







Shadows

Any element can have a drop or inner shadow. In addition, shadow can be applied to text. To activate a shadow, select the “Active” checkbox in the respective area in the style inspector. You can then change the shadow settings.

You may also use the style bar to edit shadows.

Document image


Document image








Text

Text can be entered by double-clicking a cell or by entering text in the style inspector’s text box.

Text styles can also be accessed from the style bar if a cell that contains text is selected.

Document image




Note

Entering text on the canvas changes the text for all states. If you want individual text per state, use the Style inspector (right sidebar).



Alignment

Text can be aligned, independent from the alignment of nested elements.



Line Height

With the line height property, you can define the space between two lines of text. It is also useful to vertically align a text exactly in a cell. You can specify an exact value or a multiple of the current font size.



Word-wrap

By default, text doesn't wrap if it reaches the element's bounds. You can turn wrapping on in the style inspector. In addition the width of the text cell must be set to stretch.

Tip

If you enable word-wrapping and set the cell to shrink vertically, the bounds of the cell adapt to the length of the text content.



Truncation

If truncation is activated, text that doesn't fit inside the text box will be truncated by an ellipsis. This setting has no effect in combination with word wrap or if the width of the text box is set to shrink.

Editable in Prototype

If activated the cell becomes an editable text field in the exported prototype or the preview.

Updated 03 Mar 2023
Did this page help you?
Yes
No
PREVIOUS
General
NEXT
Color Management
Docs powered by archbee 
TABLE OF CONTENTS
Position
Size
Manual
Stretch
Shrink
Minimum and Maximum
Automatic Layout
Free
Stacked
Horizontal Flow
Vertical Flow
Wrap
Gap
Float
Margin and Padding
Margin
Padding
Breakpoints
Display
Hidden
Visible
Collapsed
Opacity
Z-Index
Blur
Rotation
Blend Mode
Rounded Corners
Border
Background
Color
Gradient
Image
Content
Clip Content
Scrollable
Mouse Selection
Accept Drops
Nested Cells
Shadows
Text
Alignment
Line Height
Word-wrap
Truncation
Editable in Prototype