docs: fix the reference code

This commit is contained in:
Jonathan Kelley committed 2022-01-03 13:26:15 -05:00
1 parent c34043f1c8
commit 3de776c42a
8 files changed
+300 -85

No files matched your search

+16 -24
View File
@@ -3,27 +3,19 @@
This folder holds a bunch of useful reference code. However, none of the code is meant to be executed (nothing special will happen).
| Reference: | What it does |
| --------------------------------------------------- | ----------------------------------- |
| [Basics](./basics.rs) | How to handle futures with suspense |
| [Empty](./empty.rs) | How to handle futures with suspense |
| [Children](./children.rs) | How to handle futures with suspense |
| [Async](./async.rs) | How to handle futures with suspense |
| [Suspense](./suspense.rs) | How to handle futures with suspense |
| [Conditional Rendering](./conditional_rendering.rs) | How to handle futures with suspense |
| [Controlled Inputs](./controlled_inputs.rs) | How to handle futures with suspense |
| [Fragments](./fragments.rs) | How to handle futures with suspense |
| [Inline Styles](./inline_styles.rs) | How to handle futures with suspense |
| [Spread Pattern for Props](./spreadpattern.rs) | How to handle futures with suspense |
| [Iterators](./iterators.rs) | How to handle futures with suspense |
| [Listener](./listener.rs) | How to handle futures with suspense |
| [Memo](./memo.rs) | How to handle futures with suspense |
| [NodeRef](./noderefs.rs) | How to handle futures with suspense |
| [Signals](./signals.rs) | How to handle futures with suspense |
| [ToString](./tostring.rs) | How to handle futures with suspense |
| [Global CSS](./global_css.rs) | How to handle futures with suspense |
| [State Management](./statemanagement.rs) | How to handle futures with suspense |
| [Testing](./testing.rs) | How to handle futures with suspense |
| [Custom Elements](./custom_elements.rs) | How to handle futures with suspense |
| [Web Components](./webcomponents.rs) | How to handle futures with suspense |
| [Anti-patterns](./antipatterns.rs) | What not to do! |
| Reference: | What it does |
| --------------------------------------------------- | ------------------------------------------------------ |
| [Basics](./basics.rs) | How to render a simple app |
| [Empty](./empty.rs) | Components can return None |
| [Children](./children.rs) | Components can have children |
| [Suspense](./suspense.rs) | Suspense can be achieved with use_suspense |
| [Conditional Rendering](./conditional_rendering.rs) | Elements can be hidden conditionally |
| [Controlled Inputs](./controlled_inputs.rs) | Inputs are "controlled" similar to React |
| [Fragments](./fragments.rs) | Components can return multiple elements without a root |
| [Inline Styles](./inline_styles.rs) | Styles can be inlined as element attributes |
| [Spread Pattern for Props](./spreadpattern.rs) | Props can be spread into component calls |
| [Iterators](./iterators.rs) | Lists of elements can be made from iterators |
| [Listener](./listener.rs) | State can be updated from event listeners |
| [Memo](./memo.rs) | Memoization is controlled via PartialEq |
| [Custom Elements](./custom_elements.rs) | Define custom elements |
| [Anti-patterns](./antipatterns.rs) | What not to do! |
+5 -14
View File
@@ -13,26 +13,17 @@ use dioxus::prelude::*;
pub fn Example(cx: Scope) -> Element {
cx.render(rsx! {
head {
style: { background_color: "powderblue" }
background_color: "powderblue"
}
body {
h1 { style: { color: "blue" }
h1 {
color: "blue",
"This is a heading"
}
p { style: { color: "red" }
p {
color: "red",
"This is a paragraph"
}
}
})
}
// .... technically the rsx! macro is slightly broken at the moment and allows styles not wrapped in style {}
// I haven't noticed any name collisions yet, and am tentatively leaving this behavior in..
// Don't rely on it.
pub fn Example2(cx: Scope) -> Element {
cx.render(rsx! {
div { color: "red"
"hello world!"
}
})
}
+1 -1
View File
@@ -28,7 +28,7 @@ pub struct MyProps<'a> {
children: Element<'a>,
}
pub fn Example1(cx: Scope<MyProps>) -> Element {
pub fn Example1<'a>(cx: Scope<'a, MyProps<'a>>) -> Element {
let MyProps { count, live, name } = cx.props;
cx.render(rsx! {
div {