Conditional css class property

I have seen a lot of class bindings adding css class if condition is true, like: {value: IsActive ? "active" : ""}. I think we could implement some nicer way to code this behavior, something similar to knockout css binding.

Maybe it could be attribute group, like RouteLink Param-...

<div CssClass-active="{value: IsActive}">
    ...

Definitely a good idea, we'll do it right after 1.0 RTM is out.

Sent from my Windows Phone

From: Stanislav Lukešmailto:notifications@github.com Sent: ‎6/‎16/‎2016 4:05 PM To: riganti/dotvvmmailto:dotvvm@noreply.github.com Subject: [riganti/dotvvm] Conditional css class property (#196)

I have seen a lot of class bindings adding css class if condition is true, like: {value: IsActive ? "active" : ""}. I think we could implement some nicer way to code this behavior, something similar to knockout css bindinghttp://knockoutjs.com/documentation/css-binding.html.

Maybe it could be attribute group, like RouteLink Param-...

... — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/riganti/dotvvm/issues/196, or mute the threadhttps://github.com/notifications/unsubscribe/AFVxJLnuJKb1DgrT70vNNL3hu_3odA8fks5qMVgugaJpZM4I3a9C.

Just for clarification, multiple CSS classes will be declared as

<div CssClass-class1="{value: bool}" CssClass-class3="{value: bool}" CssClass-class2="{value: bool}">
...
</div>

and it will be rendered as (in the same order as declared)

<div class="class1 class3 class2">
</div>

Why do we need to use CssClass instead of Class? When it comes to HTML... everybody knows that "class" means CSS class.

@darilek It will render knockout data-bind attribute with css binding.

<div data-bind="css: {class1: bool1, class3: bool3, class2: bool2">
</div>

@djanosik You are right, Class-active="{value:IsActive}" looks ok.

@exyi nice feature, i agree with simplified naming

Implemented

Example:

<div Class-italic="{value: Italic}" Class-blue="{value: Blue}" Class-bordered="{value: Bordered}">
        DotVVM is awesome!
</div>

riganti / dotvvm

Conditional css class property #196

Implemented