docs: examples

This commit is contained in:
Jonathan Kelley committed 2021-07-02 01:30:52 -04:00
1 parent 818043e5e4
commit d9e6d0925b
33 files changed
+732 -152

No files matched your search

+46 -25
View File
@@ -1,29 +1,50 @@
# Examples
Most of these examples are run through webview so you don't need the dioxus cli installed to preview the functionality. Anything labeled `_web` will need to be built with the Dioxus CLI to preview features that only a native bundle can handle.
Most of these examples are run through webview so you don't need the dioxus cli installed to preview the functionality.
List of examples:
These examples are fully-fledged micro apps. They can be ran with the `cargo run --example XYZ`
| Example | What it does |
| --------------------------------------- | ------------ |
| [The basics](./basics.rs) | this does |
| [fine grained reactivity](./signals.rs) | this does |
| Global State Management | this does |
| Virtual Refs | this does |
| Inline Styles | this does |
| Conditional Rendering | this does |
| Maps/Iterators | this does |
| Render To string | this does |
| Component Children | this does |
| Function Driven children | this does |
| Memoization | this does |
| Borrowed Data | this does |
| Fragments | this does |
| Null/None Components | this does |
| Spread Pattern for props | this does |
| Controlled Inputs | this does |
| Custom Elements | this does |
| Testing And debugging | this does |
| Asynchronous Data | this does |
| Fiber/Scheduled Rendering | this does |
| CSS Compiled Styles | this does |
| Example | What it does | Status |
| --------------------------------------------------- | ------------------------------------------- | ------ |
| [The basics](./basics.rs) | A few basic examples to preview Dioxus | 🛠 |
| [fine grained reactivity](./signals.rs) | Escape `diffing` by writing values directly | 🛠 |
| [Global State Management](./statemanagement.rs) | Share state between components | 🛠 |
| [Virtual Refs]() | Cross-platform imperative elements | 🛠 |
| [Inline Styles](./inline-styles.rs) | Define styles for elements inline | 🛠 |
| [Conditional Rendering](./conditional-rendering.rs) | Hide/Show elements using conditionals | ✅ |
These examples are not necessarily meant to be run, but rather serve as a reference for the given functionality.
| Example | What it does | Status |
| --------------------------------------------------- | ----------------------------------------------- | ------ |
| [The basics](./basics.rs) | A few basic examples to preview Dioxus | 🛠 |
| [fine grained reactivity](./signals.rs) | Escape `diffing` by writing values directly | 🛠 |
| [Global State Management](./statemanagement.rs) | Share state between components | 🛠 |
| [Virtual Refs]() | Cross-platform imperative elements | 🛠 |
| [Inline Styles](./inline-styles.rs) | Define styles for elements inline | 🛠 |
| [Conditional Rendering](./conditional-rendering.rs) | Hide/Show elements using conditionals | ✅ |
| [Maps/Iterators](./iterators.rs) | Use iterators in the rsx! macro | 🛠 |
| [Render To string](./tostring.rs) | Render a mounted virtualdom to a string | 🛠 |
| [Component Children](./children.rs) | Pass children into child components | 🛠 |
| [Function Driven children]() | Pass functions to make VNodes | 🛠 |
| [Memoization & Borrowed Data](./memo.rs) | Suppress renders, borrow from parents | ✅ |
| [Fragments](./fragments.rs) | Support root-less element groups | ✅ |
| [Null/None Components](./empty.rs) | Return nothing! | 🛠 |
| [Spread Pattern for props](./spreadpattern.rs) | Manually specify and override props | ✅ |
| [Controlled Inputs](./controlled-inputs.rs) | this does | 🛠 |
| [Custom Elements]() | Define custom elements | 🛠 |
| [Web Components]() | Custom elements to interface with WebComponents | 🛠 |
| [Testing And debugging]() | this does | 🛠 |
| [Asynchronous Data]() | Using suspense to wait for data | 🛠 |
| [Fiber/Scheduled Rendering]() | this does | 🛠 |
| [CSS Compiled Styles]() | this does | 🛠 |
| [Anti-patterns](./antipatterns.rs) | A collection of discouraged patterns | ✅ |
| [Complete rsx reference](./rsx_usage.rs) | A complete reference for all rsx! usage | ✅ |
| [Event Listeners](./listener.rs) | Attach closures to events on elements | ✅ |
These web-specific examples must be run with `dioxus-cli` using `dioxus develop --example XYZ`
| Example | What it does |
| ------- | ------------ |
| asd | this does |
| asd | this does |