mirror of https://github.com/yewstack/yew
74 lines
1.1 KiB
Plaintext
74 lines
1.1 KiB
Plaintext
---
|
|
title: 'Conditional rendering'
|
|
description: 'Rendering nodes conditionally in html!'
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs'
|
|
import TabItem from '@theme/TabItem'
|
|
|
|
## If blocks
|
|
|
|
To conditionally render some markup, we wrap it in an `if` block:
|
|
|
|
<Tabs>
|
|
<TabItem value="if" label="if">
|
|
|
|
```rust
|
|
use yew::prelude::*;
|
|
|
|
html! {
|
|
if true {
|
|
<p>{ "True case" }</p>
|
|
}
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="if - else" label="if - else">
|
|
|
|
```rust
|
|
use yew::prelude::*;
|
|
let some_condition = true;
|
|
|
|
html! {
|
|
if some_condition {
|
|
<p>{ "True case" }</p>
|
|
} else {
|
|
<p>{ "False case" }</p>
|
|
}
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="if let" label="if let">
|
|
|
|
```rust
|
|
use yew::prelude::*;
|
|
let some_text = Some("text");
|
|
|
|
html! {
|
|
if let Some(text) = some_text {
|
|
<p>{ text }</p>
|
|
}
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="if let else" label="if let else">
|
|
|
|
```rust
|
|
use yew::prelude::*;
|
|
let some_text = Some("text");
|
|
|
|
html! {
|
|
if let Some(text) = some_text {
|
|
<p>{ text }</p>
|
|
} else {
|
|
<p>{ "False case" }</p>
|
|
}
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|