lambda-fairy/maud

optionally including multiple class names

yatesco opened this issue · 4 comments

Hi - first, thanks for maud, it's awesome ;-).

I realise I can do div.classA.classB to set multiple classes and checked[1==2] to optionally include an empty attribute.

However, how can I optionally add a class to the existing classes for an element, for example, I want either div.classA.classB.selected or div.classA.classB.

At the moment I am constructing the CSS valid classname outside of the html! code and referencing it, but it is clunky.

I've tried :```
div @if 1==2 {
class="classA classB selected"
} @else {
class="classA classB"
}

but it doesn't work.

I'd really like to be able to do something like `div.classA.classB class[1==2]="selected"` for example.

Programatically building up CSS strings seems like a common use case, so I wonder if I'm missing something :-). Thanks!

Hi @yatesco!

Sorry for the delayed response.

You can use that [] syntax on classes too. See the last example here: https://maud.lambda.xyz/splices-toggles.html#toggles-foo

Does that help?

thanks @lambda-fairy, and no problem at all :-)

It helps some, but unfortunately you can't specify the class property more than once. Does p.classA[booleanCheck].classB[booleanCheck].classC[booleanCheck] work?

Yes, that should work

perfect - thank you :-)