2020-11-02 12:53:27 +13:00
# Splices and toggles
2018-11-24 16:44:53 +13:00
2020-11-02 12:53:27 +13:00
## Splices: `(foo)`
Use `(foo)` syntax to insert the value of `foo` at runtime. Any HTML special characters are escaped by default.
2018-11-24 16:44:53 +13:00
```rust
let best_pony = "Pinkie Pie";
let numbers = [1, 2, 3, 4];
2021-01-15 17:40:46 +13:00
# let _ = maud::
2018-11-24 16:44:53 +13:00
html! {
p { "Hi, " (best_pony) "!" }
p {
"I have " (numbers.len()) " numbers, "
"and the first one is " (numbers[0])
}
}
2021-01-15 17:40:46 +13:00
# ;
2018-11-24 16:44:53 +13:00
```
Arbitrary Rust code can be included in a splice by using a [block ](https://doc.rust-lang.org/reference.html#block-expressions ). This can be helpful for complex expressions that would be difficult to read otherwise.
```rust
2021-01-15 17:40:46 +13:00
# struct Foo;
# impl Foo { fn time(self) -> Bar { Bar } }
# struct Bar;
# impl Bar { fn format(self, _: &str) -> &str { "" } }
# fn something_convertible_to_foo() -> Option<Foo> { Some(Foo) }
# fn test() -> Option<()> {
# let _ = maud::
2018-11-24 16:44:53 +13:00
html! {
p {
({
let f: Foo = something_convertible_to_foo()?;
f.time().format("%H%Mh")
})
}
}
2021-01-15 17:40:46 +13:00
# ;
# Some(())
# }
2018-11-24 16:44:53 +13:00
```
2020-11-02 12:53:27 +13:00
### Splices in attributes
2018-11-24 16:44:53 +13:00
Splices work in attributes as well.
```rust
let secret_message = "Surprise!";
2021-01-15 17:40:46 +13:00
# let _ = maud::
2018-11-24 16:44:53 +13:00
html! {
p title=(secret_message) {
"Nothing to see here, move along."
}
}
2021-01-15 17:40:46 +13:00
# ;
2018-11-24 16:44:53 +13:00
```
To concatenate multiple values within an attribute, wrap the whole thing in braces. This syntax is useful for building URLs.
```rust
const GITHUB: & 'static str = "https://github.com";
2021-01-15 17:40:46 +13:00
# let _ = maud::
2018-11-24 16:44:53 +13:00
html! {
2019-09-14 13:48:59 +12:00
a href={ (GITHUB) "/lambda-fairy/maud" } {
2018-11-24 16:44:53 +13:00
"Fork me on GitHub"
}
}
2021-01-15 17:40:46 +13:00
# ;
2018-11-24 16:44:53 +13:00
```
2020-11-02 16:33:03 +11:00
### Splices in classes and IDs
Splices can also be used in classes and IDs.
```rust
let name = "rarity";
let severity = "critical";
2021-01-15 17:40:46 +13:00
# let _ = maud::
2020-11-02 16:33:03 +11:00
html! {
aside#(name) {
p.{ "color-" (severity) } { "This is the worst! Possible! Thing!" }
}
}
2021-01-15 17:40:46 +13:00
# ;
2020-11-02 16:33:03 +11:00
```
2020-11-02 12:53:27 +13:00
### What can be spliced?
2018-11-24 16:44:53 +13:00
You can splice any value that implements [`std::fmt::Display` ][Display]. Most primitive types (such as `str` and `i32` ) implement this trait, so they should work out of the box.
2020-11-02 12:53:27 +13:00
To change this behavior for some type, you can implement the [`Render` ][Render] trait by hand. The [`PreEscaped` ][PreEscaped] wrapper type, which outputs its argument without escaping, works this way. See the [traits ](render-trait.md ) section for details.
2018-11-24 16:44:53 +13:00
```rust
use maud::PreEscaped;
let post = "< p > Pre-escaped< / p > ";
2021-01-15 17:40:46 +13:00
# let _ = maud::
2018-11-24 16:44:53 +13:00
html! {
h1 { "My super duper blog post" }
(PreEscaped(post))
}
2021-01-15 17:40:46 +13:00
# ;
2018-11-24 16:44:53 +13:00
```
[Display]: http://doc.rust-lang.org/std/fmt/trait.Display.html
[Render]: https://docs.rs/maud/*/maud/trait.Render.html
[PreEscaped]: https://docs.rs/maud/*/maud/struct.PreEscaped.html
2020-11-02 12:53:27 +13:00
## Toggles: `[foo]`
Use `[foo]` syntax to show or hide something based on a boolean expression `foo` .
This works on empty attributes:
```rust
let allow_editing = true;
2021-01-15 17:40:46 +13:00
# let _ = maud::
2020-11-02 12:53:27 +13:00
html! {
2020-11-11 16:47:23 +13:00
p contenteditable[allow_editing] {
2020-11-02 12:53:27 +13:00
"Edit me, I "
em { "dare" }
" you."
}
}
2021-01-15 17:40:46 +13:00
# ;
2020-11-02 12:53:27 +13:00
```
And classes:
```rust
let cuteness = 95;
2021-01-15 17:40:46 +13:00
# let _ = maud::
2020-11-02 12:53:27 +13:00
html! {
p.cute[cuteness > 50] { "Squee!" }
}
2021-01-15 17:40:46 +13:00
# ;
2020-11-02 12:53:27 +13:00
```