Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds ability to use multiple classes in view macro using array syntax. #2532

Merged
merged 2 commits into from
Apr 17, 2024
Merged

Adds ability to use multiple classes in view macro using array syntax. #2532

merged 2 commits into from
Apr 17, 2024

Conversation

bicarlsen
Copy link
Contributor

Adds array syntax to the fancy class name syntax in the view macro for multiple classes to be controlled by the same class attribute.
e.g.

#[component]
fn App() -> impl IntoView {
  let (classes, set_classes) = create_signal(true);

  view! {
    <div
      class=(["class-1", "class-2"], classes)
    >
      <button
        on:click=move |_| set_classes(!classes)
      >
        Toggle
      </button>
    </div>
  }
}

Compared to the current style which requires creating a new class attribute for each class.
e.g.

#[component]
fn App() -> impl IntoView {
  let (classes, set_classes) = create_signal(true);

  view! {
    <div
      class=("class-1", classes)
      class=("class-2", classes)
    >
      <button
        on:click=move |_| set_classes(!classes)
      >
        Toggle
      </button>
    </div>
  }
}

This can be especially useful when using styling systems like Tailwind.

This was discussed in #2522.

@bicarlsen
Copy link
Contributor Author

bicarlsen commented Apr 16, 2024

Another option is to use the current syntax, but split the class string at spaces.
e.g.

<div
  class=("class-1 class-2", true)
>
</div>

@gbj
Copy link
Collaborator

gbj commented Apr 17, 2024

I like the array syntax a lot, and it seems to work in my testing. Thanks for this!

@gbj gbj merged commit 9a7dbd5 into leptos-rs:main Apr 17, 2024
57 of 59 checks passed
@bicarlsen bicarlsen deleted the feat/multiclass branch April 18, 2024 06:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants