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

Document possibility of conditionally appending in RSX #314

Merged
merged 2 commits into from
Oct 31, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs-src/0.5/en/reference/rsx.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
13 changes: 13 additions & 0 deletions src/doc_examples/rsx_overview.rs
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,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);
Expand Down