Document possibility of conditionally appending in RSX (#314)

* Document possibility of conditionally appending in RSX * Mention space added between values --------- Co-authored-by: Evan Almloff <[email protected]>
DioxusLabs · Oct 31, 2024 · a4f5eba · a4f5eba
1 parent 161cefc
commit a4f5eba
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/docs-src/0.5/en/reference/rsx.md b/docs-src/0.5/en/reference/rsx.md
@@ -61,6 +61,12 @@ DemoFrame {
 }
 ```
 
+Repeating an attribute joins the values with a space. This makes it easy to add values like classes conditionally:
+
+```rust, no_run
+{{#include src/doc_examples/rsx_overview.rs:conditional_attributes_concatenation}}
+```
+
 #### Custom Attributes
 
 Dioxus has a pre-configured set of attributes that you can use. RSX is validated at compile time to make sure you didn't specify an invalid attribute. If you want to override this behavior with a custom attribute name, specify the attribute in quotes:

diff --git a/src/doc_examples/rsx_overview.rs b/src/doc_examples/rsx_overview.rs
@@ -110,6 +110,19 @@ pub fn ConditionalAttributes() -> Element {
     // ANCHOR_END: conditional_attributes
 }
 
+pub fn ConditionalAttributesConcatenation() -> Element {
+    // ANCHOR: conditional_attributes_concatenation
+    let large_font = true;
+    rsx! {
+        div {
+            class: "base-class another-class",
+            class: if large_font { "text-xl" },
+            "Hello, World!"
+        }
+    }
+    // ANCHOR_END: conditional_attributes_concatenation
+}
+
 pub fn Formatting() -> Element {
     // ANCHOR: formatting
     let coordinates = (42, 0);