dioxus/examples
Stygmates 1b977fdce9
Add query segment example and documentation (#1417)
* fix a few new clippy lints

* Add query segment example

* Add trait documentation

* Change core package to root package

The core package contains the virtual dom implementation ([here](https://github.com/DioxusLabs/dioxus/tree/master/packages/core)). Root package might be a more clear way to refer to the main directory

---------

Co-authored-by: Evan Almloff <evanalmloff@gmail.com>
2023-09-02 10:24:30 -05:00
..
assets fix: Update logos and custom assets example (#960) 2023-04-15 08:02:04 -05:00
mobile_demo Add ScopeId::ROOT (#1398) 2023-08-25 08:31:23 -05:00
PWA-example Bump crate versions, fix any publish errors 2023-07-31 18:49:54 -07:00
query_segments_demo Add query segment example and documentation (#1417) 2023-09-02 10:24:30 -05:00
tailwind Update tailwind examples to work with multi-page apps (#1339) 2023-08-12 08:34:42 -05:00
all_css.rs chore: clean up interpreter and bindings 2022-12-05 16:47:04 -08:00
all_events.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
borrowed.rs chore: clean up interpreter and bindings 2022-12-05 16:47:04 -08:00
button.rs make clippy happy 2023-02-06 22:18:07 -08:00
calculator.rs fix clippy 2023-01-27 20:35:46 -06:00
callback.rs fix clippy 2023-01-27 20:35:46 -06:00
clock.rs restore clock example 2023-08-08 13:31:38 -07:00
compose.rs chore: clean up some clippy warnings and add clippy lints to CI 2023-01-11 16:13:41 -08:00
control_focus.rs Merge branch 'upstream' into query-system 2023-05-05 11:09:25 -05:00
counter.rs add counter example 2023-04-09 13:42:40 -07:00
crm.rs it almost lives? 2023-07-25 18:14:48 -07:00
custom_assets.rs fix: Update logos and custom assets example (#960) 2023-04-15 08:02:04 -05:00
custom_html.rs Less clumsy configuration for desktop and mobile (#553) 2022-09-13 16:22:27 -07:00
disabled.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
dog_app.rs Dont use suspense in dog app, remove from use_future 2023-07-14 17:17:08 -07:00
drops.rs make clippy happy 2023-01-15 10:12:22 -08:00
error_handle.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
eval.rs Convert use_eval to use send/recv system (#1080) 2023-07-21 17:36:25 -05:00
fermi.rs Fix the issue of duplicate unique ID for atoms using newtype. 2023-06-21 21:50:10 +08:00
file_explorer.rs fix clippy 2023-01-27 20:35:46 -06:00
file_upload.rs Changed directory to webkitdirectory in bool_attrs definitions. 2023-07-10 17:19:11 +08:00
filedragdrop.rs fix clippy 2023-01-27 20:35:46 -06:00
flat_router.rs it almost lives? 2023-07-25 18:14:48 -07:00
form.rs Renderers are now packages, not features. (#387) 2022-07-09 15:15:20 -04:00
framework_benchmark.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
generic_component.rs use the generic parameter in the generic component example 2023-04-23 11:54:40 -05:00
heavy_compute.rs Renderers are now packages, not features. (#387) 2022-07-09 15:15:20 -04:00
hello_world.rs Renderers are now packages, not features. (#387) 2022-07-09 15:15:20 -04:00
hydration.rs fix all broken examples (#1248) 2023-07-25 14:30:08 -05:00
inlineprops.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
inputs.rs added select element example 2023-04-23 17:15:06 +02:00
link.rs it almost lives? 2023-07-25 18:14:48 -07:00
login_form.rs Fix the login form example 2023-08-08 15:45:09 -07:00
multiwindow.rs chore: clean up some clippy warnings and add clippy lints to CI 2023-01-11 16:13:41 -08:00
nested_listeners.rs Fix typo (#702) 2023-01-01 14:41:18 -06:00
optional_props.rs Renderers are now packages, not features. (#387) 2022-07-09 15:15:20 -04:00
overlay.rs chore: clean up some clippy warnings and add clippy lints to CI 2023-01-11 16:13:41 -08:00
pattern_model.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
pattern_reducer.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
read_size.rs fix link component 2023-07-26 10:18:39 -07:00
README.md Update README.md 2023-06-30 13:31:59 +02:00
readme.rs fix: window zoom 2022-12-30 02:09:02 -05:00
router.rs Make deprecated use router (#1260) 2023-07-27 10:32:23 -07:00
rsx_compile_fail.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
rsx_usage.rs fix clippy 2023-01-27 20:35:46 -06:00
scroll_to_top.rs add examples for onmounted 2023-03-24 11:32:42 -05:00
shared_state.rs Fix clippy 2023-07-14 16:34:49 -07:00
shortcut.rs Fix merge errors 2023-06-30 12:48:25 -07:00
signals.rs fix memo and add tests 2023-08-07 14:31:03 -07:00
simple_desktop.rs it almost lives? 2023-07-25 18:14:48 -07:00
simple_list.rs chore: make for loops not the same 2022-11-17 22:55:46 -08:00
simple_router.rs Add simpler router 2023-07-26 19:19:51 -07:00
ssr.rs fix clippy 2023-01-27 20:35:46 -06:00
suspense.rs fix all broken examples (#1248) 2023-07-25 14:30:08 -05:00
svg.rs fix rng in svg dice example (#970) 2023-04-22 11:09:41 -05:00
svg_basic.rs fix: parsing of attributes without trailing commas 2022-12-12 11:18:36 -08:00
tasks.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
textarea.rs fix clippy 2023-01-27 20:35:46 -06:00
todomvc.rs Add more features to todomvc (#928) 2023-04-02 20:03:33 -05:00
web_component.rs fix formatting 2023-03-19 20:47:16 -05:00
window_event.rs Fix typo (#702) 2023-01-01 14:41:18 -06:00
window_focus.rs add to example 2023-07-04 14:48:05 +02:00
window_zoom.rs chore: clean up zoom example 2022-12-30 02:32:53 -05:00
xss_safety.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00

Examples

These examples are fully-fledged mini Dioxus apps.

You can run them with cargo run --example EXAMPLE_NAME. Example:

cargo run --example hello_world

(Most of these examples are run through webview, so you don't need the Dioxus CLI installed)

Basic Features

hello_world - Most basic example

readme - Counter example from the Readme

custom_assets - Include images

custom_html - Customize wrapper HTML

eval - Evaluate JS expressions

RSX

rsx_usage - Demo of all RSX features

xss_safety - You can include text without worrying about injections by default

Props

borrowed - Borrowed props

inlineprops - Demo of inline_props macro

optional_props - Optional props

CSS

all_css - You can specify any CSS attribute

tailwind - You can use a library for styling

Input Handling

all_events - Basic event handling demo

filedragdrop - Handle dropped files

form - Handle form submission

inputs - Input values

nested_listeners - Nested handlers and bubbling

textarea - Text area input

State Management

fermi - Fermi library for state management

pattern_reducer - The reducer pattern with use_state

rsx_compile_fail

Async

login_form - Login endpoint example

suspense - Render placeholders while data is loading

tasks - Continuously run future

SVG

svg_basic

svg

Performance

framework_benchmark - Renders a huge list

Note: The benchmark should be run in release mode:

cargo run --example framework_benchmark --release

heavy_compute - How to deal with expensive operations

Server-side rendering

ssr - Rendering RSX server-side

hydration - Pre-rendering with hydration

Common Patterns

disabled - Disable buttons conditionally

error_handle - Handle errors with early return

Routing

flat_router - Basic, flat route example

router - Router example

link - Internal, external and custom links

Platform Features

window_event - Window decorations, fullscreen, minimization, etc.

window_zoom Zoom in or out

Example Apps

calculator - Simple calculator

pattern_model - Simple calculator, but using a custom struct as the model

crm - Toy multi-page customer management app

dog_app - Accesses dog API

file_explorer - File browser that uses use_ref to interact with the model

todomvc - Todo task list example

TODO

Missing Features

  • Fine-grained reactivity
  • Refs - imperative handles to elements
  • Function-driven children: Pass functions to make VNodes

Missing examples

  • Shared state
  • Root-less element groups
  • Spread props
  • Custom elements
  • Component Children: Pass children into child components
  • Render To string: Render a mounted virtualdom to a string
  • Testing and Debugging