Constant class

pub const class: (&'static str, Option<&'static str>, bool);

The HTML class attribute is used to specify a class for an HTML element.

Details

Multiple HTML elements can share the same class.

The class global attribute is a space-separated list of the case-sensitive classes of the element. Classes allow CSS and Javascript to select and access specific elements via the class selectors or functions like the DOM method document.getElementsByClassName.

Multiple Classes

If you include multiple classes in a single element dioxus will automatically join them with a space.

rsx! {
    div {
        class: "my-class",
        class: "my-other-class"
    }
};

Optional Classes

You can include optional attributes with an unterminated if statement as the value of the attribute. This is very useful for conditionally applying css classes:

rsx! {
    div {
        class: if true {
            "my-class"
        },
        class: if false {
            "my-other-class"
        }
    }
};

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class

Usage in rsx

let class = "value";

rsx! {
    // Attributes need to be under the element they modify
    div {
        // Attributes are followed by a colon and then the value of the attribute
        class: "value"
    }
    div {
        // Or you can use the shorthand syntax if you have a variable in scope that has the same name as the attribute
        class,
    }
};