Widgets
General Usage
Widgets are an important and powerful concept of Antetype. They are reusable elements that can have multiple states. All properties and the cell hierarchy is stored in the widget and its states.
WIigets are stored in the document and can be accessd from the widget inspector
The widget styling and hierachy can be changed and updated. You can create your own custom widgets, either by building them from scratch with basic elements or by duplicating an existing widget from another document.
Creating Widgets
To create a new custom widget, select an element (basic cell or existing widget) and click the Create Widget button in the toolbar or press ⌘ ⇧ W on the keyboard. Enter a name and ave the widget. A new widget with a Normal state is created. It is no stored in the widget library and can be accessed via the widget insector.
Tip
If you plan to create an element that will probably be used more than once and has different states, make a widget out of it right at the beginning.
When a widget (modified or not) is selected on the canvas or in the tree structure and the "Create Widget" button in the toolbar is clicked, a new widget is created based on the selected widget.
All changed properties that have not been updated in the original widget will be stored in the new widget, leaving the original widget untouched. You can now modify the new widget without changing the original one.
Updating and Reverting Widgets
If you modify a widget, you can propagate the changes to all other instances of the widget. In the style inspector the change is indicated by a filled dot besides the property, state and widget name. If more than one property is changed, you can update each change individually, the whole style group, whole state or the whole widget by choosing update from the dot menu. If you don't want to keep the changes, you can revert back to the original version stored in the project. By choosing revert from the dot menu.
A quick way to update or revert the whole widget are the buttons at the top right corner of the style bar that appear if a widget has been changed.
Editing and Deleting Widgets
You can delete widgets from the project, by clicking the circle menu in the widget library and choose "Delete".
There is also a special function to delete all unused widgets. This can be handy in the process of cleaning up your project.
Tip
Make sure that only the needed widgets are stored in the project. Unused widgets will increase the file size.
By choosing "Edit", you can change the name of the widget. This can also be done in the Style Inspector.
States
Any widget can have default states and an unlimited number of custom states.
Each property can be set individually in each state. For example, you can set a different background color in the Mouse Over state than in the Normal state.
Adding States
By default, only the Normal state is available when a new widget is created. To add a state, select a widget and click the + sign at the top of the states list.
Breakpoint States
If breakpoints are defined, each state can be edited in any breakpoint. Breakpoint states have to be activated by turning on the switch on the right side on the state name. If the breakpoint size is reached, the widget switches automatically in the corresponding breakpoint state.
To change the name of the state, double-click it and enter a new name.
Chaging Individual States
To change a property for a certain state, select the state and make your adjustments in the style inspector, below the states table.
You can also select multiple states at once and apply the changes to all selected states. If properties of a state have been changed, you can update the individual properties or the whole state.
If a widget is selected, the first entry of the style bar displays the currently selected state. From there, states can we changed via a menu.
You can also switch states via the contextual menu.
Note
If you change the size, position or text of a widget right on the canvas, all states will be changed.
Tip
If you want to make changes to all states, check that all states are selected, you can do this by pressing ⌃ ⌘ A on your keyboard.
Tip
If you want to make changes to a state, always check whether the correct state is selected.
Deleting States
To delete a state, select it and press the - sign behind the state name. The normal state cannot be deleted.
Automatic State Changes
If the default states are defined for a widget, some state changes are performed automatically in presentation mode or live preview.
- "Mouse Over" is activated if the mouse enters a widget
- "Normal" is activated if the mouse leaves a widget
- "Pressed" is activated if the user clicks on a widget
Individual and Shared Properties
The properties of a widget can be stored either in the widget (shared) or in the instances of the widget (individual). The setting can be changed by right-clicking the circle behind the property name in the Style inspector and selecting either "Shared" or "Individual".
When a shared property is changed, the circle behind the widget name is filled. When you click on the circle, the Update and Undo options are enabled.
If you select Revert, the change is undone and the value saved in the widget is applied. If you choose Update, the new property value is saved in the widget and all other widget instances used in the project are updated.
If the same property is also changed in another widget instance, the property will not be updated with the new value. If you now want to apply the new value, select the "Revert" option in the circle menu. To update or revert multiple values at once, use the group, status or widget level menus.
Tip
Common use cases are individual sizes e.g. for modals or overlays or individual colors for a specific state.
Tip
This feature should not be used to get rid of the filled dots that indicate a changed property. If you have made changes to an existing widget and are not sure if you should update it, you can also choose to create a new widget from it.
Individual and Shared Content
In some cases, especially for complex widgets with a content area (tabs, toolbars, etc.), not all nested elements should be stored in the widget and the content should be set to individual. This can be achieved by choosing Nested Cells: Individual in the style inspector. This option is only enabled for widgets. Cells with individual content are also represented with a different icon in the screen inspector.
By default the content will not be stored in the widget and if nested cells are deleted or new cells are nested, the filled circle will not be shown, because only the hierarchy of the widget instance, not the widget is changed.
Widget Snapshot
Create Widget Snapshot updates the content of widgets with individual content in the widget library. This way a widget with individual content is not empty when used from the widget library.
Naming Widgets and Widget Cells
The widget name can be updated either in the style inspector or in the widget inspector. If changed, the name will automatically be updated in the project.
