diff --git a/book/src/SUMMARY.md b/book/src/SUMMARY.md index e536b4a26..b01b95327 100644 --- a/book/src/SUMMARY.md +++ b/book/src/SUMMARY.md @@ -17,11 +17,12 @@ - [Global Signals](./learn/state_management/global_signals.md) - [Dioxus Hooks](./learn/dioxus_hooks.md) - [Context](./learn/state_management/context.md) - - [Other Crates](./learn/state_management/other_crates.md) + - [Third Party](./learn/state_management/third_party.md) - [Async](./learn/async.md) - [Themes](./learn/themes.md) - [i18n](./learn/i18n.md) - [Animation](./learn/animation.md) +- [Accessibility](./learn/accessibility.md) - [Router](./learn/router.md) - [Native Router](./learn/router/native_router.md) - [Animated transitions](./learn/router/animated_transitions.md) diff --git a/book/src/learn/accessibility.md b/book/src/learn/accessibility.md new file mode 100644 index 000000000..dc1a503be --- /dev/null +++ b/book/src/learn/accessibility.md @@ -0,0 +1,23 @@ +# Accessibility + +TODO + +### `use_focus` hook + +```rs +fn app() -> Element { + let mut my_focus = use_focus(); + + rsx!( + rect { + width: "100%", + height: "100%", + focus_id: my_focus.attribute(), + onclick: move |_| my_focus.focus(), + label { + "{my_focus.is_focused()}" + } + } + ) +} +``` \ No newline at end of file diff --git a/book/src/learn/animation.md b/book/src/learn/animation.md index c892a9bd3..6568ac4f5 100644 --- a/book/src/learn/animation.md +++ b/book/src/learn/animation.md @@ -2,21 +2,56 @@ Freya comes with a `use_animation` hook to create and manage animations in declarative way. -TODO +Simple Example: -Example: ```rs fn app() -> Element { let animation = use_animation(|ctx| { - ctx.auto_start(true); - ctx.with(AnimNum::new(0., 100.).time(50)) + // The animation will start automatically when the component is mounted + ctx.auto_start(true); + // Create an animable numeric value that starts from 0 and goes to 100 in 200ms + ctx.with(AnimNum::new(0., 100.).time(200)) }); let width = animation.get().read().as_f32(); rsx!(rect { - width: "{width}", + width: "{width}%", height: "100%", background: "blue" }) -} \ No newline at end of file +} + +Advanced Example: + +```rs +fn app() -> Element { + let animation = use_animation(|ctx| { + // The animation will start automatically when the component is mounted + ctx.auto_start(true); + + // Run the animation in revese direction once an iteration is done + ctx.on_finish(OnFinish::Reverse); + + // You can register as many animations you want + ( + // Create an animable numeric value that starts from 0 and goes to 100 in 500ms + ctx.with(AnimNum::new(0., 100.).time(500).ease(Ease::InOut)), + // Create an animable color value that starts from one color and transitions to another in 400ms and has a Bounce function + ctx.with( + AnimColor::new("rgb(131, 111, 255)", "rgb(255, 167, 50)") + .time(400) + .function(Function::Bounce) + ) + ) + }); + + let (width, color) = animation.get(); + + rsx!(rect { + width: "{width.read().as_f32()}%", + height: "100%", + background: "{color.read().as_string()}", + }) +} +``` \ No newline at end of file diff --git a/book/src/learn/built_in_hooks.md b/book/src/learn/built_in_hooks.md index b00b47a4e..0ec9573b5 100644 --- a/book/src/learn/built_in_hooks.md +++ b/book/src/learn/built_in_hooks.md @@ -2,23 +2,4 @@ Freya comes with a set hooks to simplify various tasks, such as animations, accessibility, text editing and more. -You can find more about them in [their docs](https://docs.rs/freya-hooks). - -Example: -```rs -fn app() -> Element { - let mut my_focus = use_focus(); - - rsx!( - rect { - width: "100%", - height: "100%", - focus_id: my_focus.attribute(), - onclick: move |_| my_focus.focus(), - label { - "{my_focus.is_focused()}" - } - } - ) -} -``` \ No newline at end of file +You can find more about them in [their docs](https://docs.rs/freya-hooks). \ No newline at end of file diff --git a/book/src/learn/components.md b/book/src/learn/components.md index dc83883a7..de26e6d03 100644 --- a/book/src/learn/components.md +++ b/book/src/learn/components.md @@ -1,7 +1,7 @@ # Components Freya apps will usually be composed of different components. -Components are defined in teh form functions that might receive some input as **Props** and return the UI as **Element**. +Components are defined in the form functions that might receive some input as **Props** and return the UI as **Element**. This is how a simple root component looks like: diff --git a/book/src/learn/getting_started.md b/book/src/learn/getting_started.md deleted file mode 100644 index bad55622f..000000000 --- a/book/src/learn/getting_started.md +++ /dev/null @@ -1 +0,0 @@ -# Getting Started diff --git a/book/src/learn/i18n.md b/book/src/learn/i18n.md index 854078075..678b31043 100644 --- a/book/src/learn/i18n.md +++ b/book/src/learn/i18n.md @@ -1 +1,5 @@ # i18n + +You may add i18n (localization) support to your Freya app by using the [**dioxus-i18n**](https://github.com/dioxus-community/dioxus-i18n) crate. + +[Code Example](https://github.com/dioxus-community/dioxus-i18n/blob/main/examples/freya.rs). \ No newline at end of file diff --git a/book/src/learn/reactivity.md b/book/src/learn/reactivity.md deleted file mode 100644 index 5a26ca9fb..000000000 --- a/book/src/learn/reactivity.md +++ /dev/null @@ -1 +0,0 @@ -# Reactivity diff --git a/book/src/learn/state_management.md b/book/src/learn/state_management.md index e2937def9..830a89ff0 100644 --- a/book/src/learn/state_management.md +++ b/book/src/learn/state_management.md @@ -1 +1,10 @@ # State Management + +Dioxus and thus Freya apps, don't have a single type of state management. + +See the different options: + +- [Signals](./state_management/signals.md) +- [Global Signals](./state_management/globla_signals.md) +- [Context](./state_management/context.md) +- [Third Party](./state_management/third_party.md) \ No newline at end of file diff --git a/book/src/learn/state_management/global_signals.md b/book/src/learn/state_management/global_signals.md index c93643ae3..d58f9a183 100644 --- a/book/src/learn/state_management/global_signals.md +++ b/book/src/learn/state_management/global_signals.md @@ -1 +1,35 @@ # Global Signals + +Global Signals behave like Signals but you declare them statitically and you don't need to pass them through props or context as you can just import it. +Main use case is for apps, not libraries. + +Example: + +```rs + +static COUNT: GlobalSignal = Signal::global(|| 0); + +fn app() -> Element { + let onclick = move |_| { + COUNT += 1; // Modify the global signal, as if it was a normal signal + }; + + rsx!( + label { + onclick, + "{COUNT}" // Read the global signal + } + SomeOtherComp {} + ) +} + +#[component] +fn SomeOtherComp() -> Element { + rsx!( + label { + "{COUNT}" // We can use the global signal here again + } + ) +} + +``` \ No newline at end of file diff --git a/book/src/learn/state_management/other_crates.md b/book/src/learn/state_management/other_crates.md deleted file mode 100644 index e69de29bb..000000000 diff --git a/book/src/learn/state_management/third_party.md b/book/src/learn/state_management/third_party.md new file mode 100644 index 000000000..f64e38a3f --- /dev/null +++ b/book/src/learn/state_management/third_party.md @@ -0,0 +1,11 @@ +# Third Party + +### dioxus-query + +https://github.com/marc2332/dioxus-query + + +### dioxus-radio + +https://github.com/dioxus-community/dioxus-radio + diff --git a/book/src/learn/themes.md b/book/src/learn/themes.md index 537c6e243..45af5ee70 100644 --- a/book/src/learn/themes.md +++ b/book/src/learn/themes.md @@ -1 +1,66 @@ # Themes + +All the built-in components of Freya support themes, so if you find yourself wanting to tweak a certain style attribute of a component you might want to see if it can be changed through a theme. + +### ThemeProvider + +You can pass a ThemeProvider to your whole app or maybe just a part of it by using the ThemeProvider component. + +Example: + +```rs +// A custom theme based on the Light Theme that simply tweaks some parts of the Button theme. +const CUSTOM_THEME: Theme = Theme { + button: ButtonTheme { + background: Cow::Borrowed("rgb(230, 0, 0)"), + hover_background: Cow::Borrowed("rgb(150, 0, 0)"), + font_theme: FontTheme { + color: Cow::Borrowed("white"), + }, + ..LIGHT_THEME.button + }, + ..LIGHT_THEME +}; + +fn app() -> Element { + rsx!( + /// All the components descendant of this ThemeProvider will inherit the Custom Theme + /// Again, this could be your whole app or maybe just a small part. + ThemeProvider { + theme: CUSTOM_THEME, + rect { + width: "100%", + height: "100%", + Button { + label { + "Cancel" + } + } + } + } + ) +} +``` + +### `theme` prop + +Most of the components also support being tweaked via their `theme` prop and with the help of the `theme_with` macro. + +Example: + +```rs +fn app() -> Element { + rsx!( + Button { + // You could pass the whole theme or maybe just a part of it + theme: theme_with!(ButtonTheme { + background: "red".into(), + width: "200".into(), + }), + label { + "Cancel" + } + } + ) +} +``` \ No newline at end of file diff --git a/examples/animation.rs b/examples/animation.rs index 7f413b23b..e040c14cc 100644 --- a/examples/animation.rs +++ b/examples/animation.rs @@ -10,58 +10,31 @@ fn main() { } fn app() -> Element { - let mut toggle = use_signal(|| true); - let animations = use_animation(|ctx| { + let animation = use_animation(|ctx| { + // The animation will start automatically when the component is mounted + ctx.auto_start(true); + + // Run the animation in revese direction once an iteration is done + ctx.on_finish(OnFinish::Reverse); + + // You can register as many animations you want ( - ctx.with( - AnimNum::new(100., 200.) - .time(500) - .ease(Ease::Out) - .function(Function::Expo), - ), + // Create an animable numeric value that starts from 0 and goes to 100 in 50ms + ctx.with(AnimNum::new(0., 100.).time(500).ease(Ease::InOut)), + // Create an animable color value that starts from one color and transitions to another in 200ms and has a Bounce function ctx.with( AnimColor::new("rgb(131, 111, 255)", "rgb(255, 167, 50)") - .time(170) - .ease(Ease::InOut), - ), - ctx.with( - AnimNum::new(0., 360.) - .time(1000) - .ease(Ease::Out) - .function(Function::Bounce), - ), - ctx.with( - AnimNum::new(50., 0.) - .time(550) - .ease(Ease::InOut) - .function(Function::Bounce), - ), + .time(400) + .function(Function::Bounce) + ) ) }); - let (size, color, rotate, radius) = animations.get(); + let (width, color) = animation.get(); - rsx!( - rect { - main_align: "center", - cross_align: "center", - height: "100%", - width: "100%", - onclick: move |_| { - if *toggle.peek() { - animations.start(); - } else { - animations.reverse(); - } - toggle.toggle(); - }, - rect { - width: "{size.read().as_f32()}", - rotate: "{rotate.read().as_f32()}deg", - height: "50%", - background: "{color.read().as_string()}", - corner_radius: "{radius.read().as_f32()}" - } - } - ) -} + rsx!(rect { + width: "{width.read().as_f32()}%", + height: "100%", + background: "{color.read().as_string()}", + }) +} \ No newline at end of file