Skip to main content

Shorthands

Often it is helpful to set multiple property values using one style declration. For example if you'd like to set padding on all four sizes of an element it can be annoying to type 

style padded {
    PaddingLeft = 10px;
    PaddingRight = 10px;
    PaddingBottom = 10px;
    PaddingTop = 10px;
}

Instead you can use a shorthand for this. 

style padded {
    Padding = 10px;
}

Shorthands come in two flavors: 2 component and 4 component.

2 Component Shorthands​

A two component short hand has the following behavior

  • if only one value is provided, it sets both components to that value
  • if two values are provided, the components are assigned in order

This sets both PreferredWidth and PreferredHeight to 100px

style size {
    PreferredSize = 100px; 
}

This sets PreferredWidth to 100px and PreferredHeight to 2cnt

style size {
    PreferredSize = 100px 2cnt; 
}

4 Component Shorthands​

A four component short hand has the following behavior (assuming a 0 based index). It follows the TRBL (top, right, bottom, left) assignment order.

If only one value is provided, it all components to that value. In this case all four padding values are assigned 10px

style padding {
    Padding = 10px; 
}

If two values are provided, the vertical components get value 0 and the horizontal components get value 1. In this example PaddingTop and PaddingBottom are assigned 10px while PaddingLeft and PaddingRight are assigned 20px

style padding {
    Padding = 10px 20px; 
}

If three values are provided, the top component gets value 0, the horizontal components get value 1, and bottom component gets value 2. In this example PaddingTop is set to 10px, PaddingLeft and PaddingRight are assigned 20px and PaddingBottom is assigned 15px

style padding {
    Padding = 10px 20px 15px; 
}

If four values are provided, each component is assigned the corresponding value index in order from TRBL(top, right, bottom, left). In this example PaddingTop is set to 10px, PaddingRight is 20px, PaddingBottom is 15px and PaddingLeft is 1s

style padding {
    Padding = 10px 20px 15px 1s;
}