docs: move reference up a level

reference/fragments.rs

@@ -0,0 +1,51 @@
+//! Example: Fragments
+//! ------------------
+//!
+//! Dioxus can return multiple elements without a container through the use of the VNode called a "Fragment". Fragments do not
+//! have a mounted root and are inserted inline with their siblings. There are three ways of creating fragments as outlined
+//! in the examples below:
+//! - By returning multiple elements in Rsx!
+//! - By using the `Fragment` component
+//! - By using the fragment() method on the node factory
+
+use dioxus::prelude::*;
+
+// Returning multiple elements with rsx! or html!
+static App1: FC<()> = |cx, props| {
+    cx.render(rsx! {
+        h1 { }
+        h2 { }
+        h3 { }
+    })
+};
+
+// Using the Fragment component
+static App2: FC<()> = |cx, props| {
+    cx.render(rsx! {
+        Fragment {
+            div {}
+            div {}
+            "asd"
+        }
+    })
+};
+
+// Using the `fragment` method on the NodeFactory
+static App3: FC<()> = |cx, props| {
+    cx.render(LazyNodes::new(move |fac| {
+        fac.fragment_from_iter([
+            fac.text(format_args!("A")),
+            fac.text(format_args!("B")),
+            fac.text(format_args!("A")),
+            fac.text(format_args!("B")),
+        ])
+    }))
+};
+
+pub static Example: FC<()> = |cx, props| {
+    cx.render(rsx! {
+        App1 {}
+        App2 {}
+        App3 {}
+    })
+};