Properties are a nice way to make extensions somewhat configurable:

Some usage examples for properties are:

  • Colors
  • Space or project keys
  • Short messages

So you can faster edit your properties without editing your extension code.

Usage Example

Properties can easily be used within your source files, by prefixing their name with the @ symbol.

For instance, when you have defined a property "background.color" it can be easily used within a CSS file like the following:

body {
   background-color: @background.color;

Magic Suffixes

The functionality of magic suffixes heavily depends on your used browsers and may not work in all browsers, especially old ones. It's all HTML 5.

When your properties name ends with a dot (".") followed by a special keyword, the property editor will support this type.

The following suffixes are supported:

colorbackground.colorRenders a color picker.
dateyesterday.dateDate picker
datetimeyesterday.datetimeDate and time picker
emailsupport.emailValidates for a correct email address
mailsupport.mailAlias for "email"
monthrelease.monthMonth picker
numbercounter.numberValidates for numbers.
integercounter.integerAlias for "number"
telsupport.telPhone number picker
phonesupport.phoneAlias for "rel"
timesupport.start.timeTime picker
urlcontact.urlValidates urls
linkcontact.linkAlias for "url"

(lightbulb) Find out more about HTML 5 input types: