Multiple css classes using the css class api?

1

I tried searching but didn’t find an answer. Is it possible to have a space delimited list of multiple css class names for the stimulus js css class api? I’m only able to get it working with one css class name.

e.g. data-sample-foo-class="one-item-css-class"

But I want to use two or more css classes. something like
data-sample-foo-class="class-one class-two"

Is there a way to do this elegantly? I’m currently assigning each class individually and it’s cumbersome.

3

Thanks @nodalailama i saw your deleted message. That is also what I am currently doing :slight_smile: but I was hoping there was a better way.

4

Can someone repost the suggested solution for comparison?

5

Hi,

The suggestion was to do like the stimulus’s doc recommend:

data-search-loading-class=“search–busy”
data-search-loaded-class=“search–loaded”

So just list two data attributes for 2 class declaration.

Cordialement,

6

Stimulus does not restrict you from assigning multiple classes to a class variable and element.classList.add can take multiple classes as separate parameters.

element.classList.add('one', 'two', 'three')

Using the spread operator you can covert an array into multiple parameters, something like:

<form data-controller="search"
      data-search-loading-class="one two three">

export default class extends Controller {
  static classes = [ "loading" ]

  loadResults() {
    this.element.classList.add(...this.loadingClass.match(/[^ ]+/g))
  }
}

FYI, I used match with regex instead of split to handle cases where there might be 2 or more spaces.

const classes = 'one       two      three';
classes.split(' ');
//=> (14) ["one", "", "", "", "", "", "", "two", "", "", "", "", "", "three"]
classes.match(/[^ ]+/g)
//=> (3) ["one", "two", "three"]
2 Likes
7

There was PR about this a few months ago. For now, using the match operator as @tleish mentions is the only way I got it working.

Anyone know what’s the reason the suggested ...this.loadingClasses was not implemented?

8

The team merged the PR and released it in v3.0.0-beta.1 release.

2 Likes
9

I’m using v3.2.2. But don’t have multiple classes supported as documented in the reference. Anyone experiencing the same?

Upon further trying, I found that adding multiple data-[controller]-[classname]-class attributes doesn’t work either.

My mistake of not reading the reference document carefully.

When you define multiple classes like:

data-search-loading-class=“bg-gray-500 animate-spinner cursor-busy”

You have to use it with spread operator:

this.element.classList.add(…this.loadingClasses) // pay attention to the plurality