x-bind:class.class-name=... and x-bind:style.style-name=...

[Funlang]

• x-bind:class={}
• x-bind:class=[]
• x-bind:class.class-name=...
• x-bind:class.className=...
• x-bind:style={}
• x-bind:style.style-name=...
• x-bind:style.styleName=...

[KevinBatdorf]

Can you explain these some more? How would they work and what problems do they solve?

[Funlang]

Please take a look at this example: https://codepen.io/funlang/pen/qBRXmrJ

• :class.t1.t2="calcThisExpression()" vs :class="{t1: calcThisExpression(), t2: calcThisExpression()}"
• :style.width="(img.width*120)/img.height + 'px'" :style.flex-grow="(img.width*120)/img.height" vs :style="width:...;flex-grow:..."

[KevinBatdorf]

Got it now. It's pretty interesting. Thanks for the demo.

I'd suggest you make two PRs though, one for this feature and another for the performance improvements you're making.

[Funlang]

In fact, I'm not very skilled for github, so I need help if someone can help me

[Funlang]

Here #1236

• x-bind:class.class-name=...
• x-bind:class.class-name1.class-name2=...
• x-bind:class.className=...
• x-bind:style.style-name=...
• x-bind:style.styleName=...

[bennadel]

I just started learning about Alpine.js, and was going to come in here to open the exact same suggestion. I am coming from the Angular world, and they have a similar syntax for settings class names:

<div [class.my-class-name]="true"></div>

This is such a nice developer ergonomic. So far, I'm loving Alpine.js - I feel a bit of that same magic as when I first saw AngularJS. I agree with @Funlang that this would add a really nice experience.

[ekwoka]

Sometimes, you shouldn't give people more options to shoot themselves... :(

But this could be made as a custom directive pretty easily.

[bennadel]

I'm literally on day-2 of learning Alpine -- I didn't even know there were custom directives 😆 I'm going through the AlpineJS Master Class course on Udemy. But, yes, agreed that you don't want to give people more rope than they need.

[bennadel]

I just wanted to follow-up here in case anyone else comes this way looking for ideas -- taking @ekwoka cue to build this as a directive, I did an exploration this morning:

https://www.bennadel.com/blog/4597-creating-a-css-class-name-directive-in-apline-js-3.htm

This creates a x-cx directive to allow per-attribute binding:

<div
	class="message"
	x-cx:message--big="isBig"
	x-cx:message--bold="isBold"
	x-cx:message--beautiful="isBeautiful"
	x-cx:message--scream="isScream">
	....
</div>

Again, this all boils down to personal preference. But, I'm using this an opportunity to learn more about how Alpine works.

[ekwoka]

Just to flesh out the idea, might be worth adding . to separate out multiple classes.

so apply would be more like

(maybe) => [value,...modifiers].forEach(className => el.classList.toggle(className, maybe))

[bennadel]

@ekwoka oh that's clever! Nice catch. For anyone else coming to this, what he means is being able to have something like this:

<div x-cx:foo.bar.baz="true"> ... </div>

... that would apply foo, bar, and baz as three separate classes in one expression evaluation.