Working with Text

Many Mockups UI controls, such as Button, Label or DataGrid, have text in them. To edit the text, double-click on the control and start typing. Or, if you have the control selected, simply hit ENTER or F2 to start editing. To commit the text you typed, simply click anywhere other than the text field you typed in or hit Enter or CTRL+Enter. If you want to discard the text changes you just made, hit the ESCape key.

Some controls use certain characters as separators. For instance, to create multiple tabs in a tabs bar, you separate them with a comma.

Or, a space character separates tags in a Tag Cloud control. Some other controls, like the Tree, use other characters altogether. In such cases the default text for the Control includes explanations on how to use it.

Basic formatting#

Text style

You can use the following notation to format only certain parts of your control's text.

for italic, use _this notation_
for a link, use [this notation]
for bold, use *this notation*
for disabled, use -this notation-
for underlined, use &this notation&
for strikethrough, use ~this notation~
for color, use {color:#FF0000}this notation{color}. The #FF0000 is the color in HEX form, just like HTML. The macro will work with or without the # sign.
for font size, use {size:16}this notation{size}

All of the above syntax works around words separated by white spaces, and underline will work within words.

Here's a screenshot of what the above text looks like in a Paragraph control, for instance:

The shortcuts will work almost everywhere where it makes sense, and you can combine them, so to make an italic link use [_this_] or _[this]_.

Some controls like Paragraph or Label allow you to "unbold" the text via the Property Inspector panel. If you do so, the words you *bolded* will stay bold. A few controls use bold text by default, so bolding text within those controls won't make a difference.

If you want to show these special formatting characters as actual text, you can escape the *, _, -, [ and ] characters with \*, \_, \-, \[ and \], so if you want to write "this [is] some text" and don't want the "is" to become a link, just type "this \[is\] some text".

Bulleted Lists

In a paragraph control, you can create a bulleted list by preceding text with either a hyphen or an asterisk.

* item 1
* item 2
- item 3 
- item 4

More Macros#

lorem

Type lorem in a Paragraph or Text Area to use our Lorem Ipsum generator. Try l0rem for a variation showing number of characters.

{mockup-path}

Type {mockup-path} (all lower-case) in a Label or Paragraph control to show the full path of the current mockup.

{mockup-name}

Type {mockup-name} (all lower-case) in a Label or Paragraph control to show the current mockup name.

Balsamiq