Combine CSS classes and styles
The class attribute in HTML can reference multiple CSS classes separated by a space (e.g. <a class="btn btn-default">).
If the CSS classes on some element depend on the viewmodel properties, you can use value binding expressions to calculate the class attribute value.
However, when you need to combine multiple CSS classes, the expression gets quite complicated. Imagine you have three properties in the viewmodel - IsBold, IsItalic and IsUnderline, and you need to apply the bold, italic and underline CSS classes to some element when these properties are true.
The expression would look like this:
<div class="{value: (IsBold ? 'bold ' : ' ') + (IsItalic ? 'italic ' : ' ') + (IsUnderline ? 'underline ' : ' ')}">
</div>
Class-* property group
In DotVVM, there is a concept called property group. Basically, it is a group of properties with a common prefix (e.g. MyGroup-).
For example, you can see this feature in the RouteLink where the Param- property group is used to define values of route parameters.
DotVVM includes a built-in property group with prefix Class- which can be used to combine multiple CSS classes.
Instead of the long expression, you can combine classes like this:
<div Class-bold="{value: IsBold}"
Class-italic="{value: IsItalic}"
Class-underline="{value: IsUnderline}">
</div>
The div element will get a combination of the classes for all properties which evaluate to true. All these classes will be joined and appended to the class attribute. If any of the expression changes, the CSS class will be recalculated.
You can even combine the Class-something properties with the class attribute itself (e.g. when you have some classes you need to include in all cases).
<div Class-bold="{value: IsBold}"
Class-italic="{value: IsItalic}"
Class-underline="{value: IsUnderline}"
class="mydiv">
<!-- the "mydiv" class will be included every time -->
</div>
Style-* property group
DotVVM includes a built-in property group with prefix Style-. It can be used to combine multiple inline styles.
The number of use-cases for the Style- is rather limited when compared to Class-, since styling using CSS classes is preferred over styling using inline styles.
However, when the Style property is being set dynamically using JavaScript usage of the Style property group ensures that current style attributes are preserved. This is not the case when using a regular value binding, which replaces the entire style attribute with an evaluated value.
<div Style-background-color="{value: BackgroundColor}"
Style-width="{value: Width + "px"}"
Style="margin-top: 20px">
</div>
The div element will get all CSS attributes combined in single style attribute.