Image

Image

Link bar is a quick way to create a set of horizontal links separated by a pipe. You can use the asterisk * in front to indicate a clicked link and a hyphen to indicate a disabled link. Double click the widget to provide a comma separated values.

Image

This widget is similar to link bar except the link separator is a right angle indicated a trail of link path.

Image

Navigation bars are implemented in file browsers, web browsers and as a design element of some web sites.

Button Bar

Image

The default button bar, contains example tags for font awesome icons. This is to demonstrate the possibility of including icons within the button labels.

NOTE: MockupTiger icons can be added to almost all text. Simply open the text editor, expand the left panel for icons (e.g material design) and then right click on the desired icon. This icon's code will be added to the cursor position in the text box.

Input Field

Image

Input fields are quick way to design forms and input elements. Double click and provide a comma separated values

Label widget

Image

To create a vertical label, provide a rotation angle of -90 degrees

Image

 

Text Area widget

Image

Combo box

Image

Input Spinner

Image

Date Field / Picker

Image

Button Stack

Image

Button stack provides a quick way to stack buttons vertically

Input Field Stack

Image

Label Stack

Image

Using Button Stack, Input Field Stack and Label Stack you can create quick input form wireframes.

Image

Image

Calendar widget

Image

Paragraph widget

Image

Right click on the paragraph provides quick way to change the orientation. Paragraph is a very versatile widget. Technically many other widgets are derived from paragraph and by just changing certain properties they provide a different use in the wireframing process. For e.g the Box widget is nothing but a paragraph widget with default border.

Image

Star rating widget

Image

You can change the icon used in the star rating widget as follows.

1. Right click the star widget

2. Select Edit properties

Image

The icon name is listed in the "bulletIcon". You can replace the name with any icon name you find on the left panel.

 

Icon Tray widget

Image

Icon tray is a quick way to provide a set of icons for building parts of user interface. For e.g the tray icon on the bottom right corner of windows OS or the top bar of any mobile device can be quickly prototyped using this widget.

Double click the widget and then expand the icon set on the left panel. Then right click on the desired icon and the codes will be added in the text box.

Related posts:

  1. How to add Icons inside any Text component
  2. How to use text widgets in Wireframes
  3. How to use Mockups Vector Icons
  4. Clickable Mockups – Wireframes with super interactivity.
  5. Introduction to MockupTiger Wireframes

Posted in 02 - Widget Introduction, Help, Text Widgets | Tagged , , , , , , , , , , , , , , ,