|
@@ -1,60 +1,99 @@
|
|
|
-fn main() {}
|
|
|
-
|
|
|
-mod components {
|
|
|
- use baller::Baller;
|
|
|
- use dioxus::prelude::*;
|
|
|
-
|
|
|
- fn example() {
|
|
|
- let g = rsx! {
|
|
|
- div {
|
|
|
- crate::components::baller::Baller {}
|
|
|
- baller::Baller {
|
|
|
- }
|
|
|
- Taller {
|
|
|
- a: "asd"
|
|
|
- }
|
|
|
- baller::Baller {}
|
|
|
- baller::Baller {}
|
|
|
- Baller {
|
|
|
- // todo: manual props
|
|
|
- // {...BallerProps {}}
|
|
|
- }
|
|
|
- div {
|
|
|
- a: "asd",
|
|
|
- a: "asd",
|
|
|
- a: "asd",
|
|
|
- a: "asd",
|
|
|
- div {
|
|
|
- "asdas",
|
|
|
- "asdas",
|
|
|
- "asdas",
|
|
|
- "asdas",
|
|
|
- div {},
|
|
|
- div {
|
|
|
- class: "asdasd"
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- }
|
|
|
+//! A tour of the rsx! macro
|
|
|
+//! ------------------------
|
|
|
+//!
|
|
|
+//! This example serves as an informal quick reference of all the things that the rsx! macro can do.
|
|
|
+//!
|
|
|
+//! A full in-depth reference guide is available at: https://www.notion.so/rsx-macro-basics-ef6e367dec124f4784e736d91b0d0b19
|
|
|
+//!
|
|
|
+//! ## Topics
|
|
|
+//!
|
|
|
+//!
|
|
|
+//!
|
|
|
+//! ### Elements
|
|
|
+//! - Create any element from its tag
|
|
|
+//! - Accept compile-safe attributes for each tag
|
|
|
+//! - Display documentation for elements
|
|
|
+//! - Arguments instead of String
|
|
|
+//! - Text
|
|
|
+//! - Inline Styles
|
|
|
+//!
|
|
|
+//! ## General Concepts
|
|
|
+//! - Iterators
|
|
|
+//! - Keys
|
|
|
+//! - Match statements
|
|
|
+//! - Conditional Rendering
|
|
|
+//!
|
|
|
+//! ### Events
|
|
|
+//! - Handle events with the "onXYZ" syntax
|
|
|
+//! - Closures can capture their environment with the 'a lifetime
|
|
|
+//!
|
|
|
+//!
|
|
|
+//! ### Components
|
|
|
+//! - Components can be made by specifying the name
|
|
|
+//! - Components can be referenced by path
|
|
|
+//! - Components may have optional parameters
|
|
|
+//! - Components may have their properties specified by spread syntax
|
|
|
+//! - Components may accept child nodes
|
|
|
+//! - Components that accept "onXYZ" get those closures bump allocated
|
|
|
+//!
|
|
|
+//! ### Fragments
|
|
|
+//! - Allow fragments using the built-in `Fragment` component
|
|
|
+//! - Accept a list of vnodes as children for a Fragment component
|
|
|
+//! - Allow keyed fragments in iterators
|
|
|
+//! - Allow top-level fragments
|
|
|
+//!
|
|
|
+fn main() {
|
|
|
+ dioxus::webview::launch(Example);
|
|
|
+}
|
|
|
+
|
|
|
+use baller::Baller;
|
|
|
+use dioxus_core::prelude::*;
|
|
|
+
|
|
|
+static Example: FC<()> = |ctx| {
|
|
|
+ ctx.render(rsx! {
|
|
|
+ div {
|
|
|
+ // Elements
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // ==============
|
|
|
+ // Components
|
|
|
+ // ==============
|
|
|
+ // Can accept any paths
|
|
|
+ crate::baller::Baller {}
|
|
|
+ baller::Baller { }
|
|
|
|
|
|
- mod baller {
|
|
|
- use super::*;
|
|
|
- pub struct BallerProps {}
|
|
|
+ // Can take properties
|
|
|
+ Taller { a: "asd" }
|
|
|
|
|
|
- pub fn Baller(ctx: Context<()>) -> VNode {
|
|
|
- todo!()
|
|
|
+ // Can take optional properties
|
|
|
+ Taller { a: "asd" }
|
|
|
+
|
|
|
+ // Can pass in props directly
|
|
|
+ Taller { a: "asd" /* ..{props}*/ }
|
|
|
+
|
|
|
+ // Can take children
|
|
|
+ Taller { a: "asd", div {} }
|
|
|
}
|
|
|
- }
|
|
|
+ })
|
|
|
+};
|
|
|
|
|
|
- #[derive(Debug, PartialEq, Props)]
|
|
|
- pub struct TallerProps {
|
|
|
- a: &'static str,
|
|
|
- }
|
|
|
+mod baller {
|
|
|
+ use super::*;
|
|
|
+ pub struct BallerProps {}
|
|
|
|
|
|
- pub fn Taller(ctx: Context<TallerProps>) -> VNode {
|
|
|
- let b = true;
|
|
|
+ pub fn Baller(ctx: Context<()>) -> VNode {
|
|
|
todo!()
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+#[derive(Debug, PartialEq, Props)]
|
|
|
+pub struct TallerProps {
|
|
|
+ a: &'static str,
|
|
|
+}
|
|
|
+
|
|
|
+pub fn Taller(ctx: Context<TallerProps>) -> VNode {
|
|
|
+ let b = true;
|
|
|
+ todo!()
|
|
|
+}
|