From 60bfdbf0843c6d5fa8e84a3aa9f2de8e9a11fe58 Mon Sep 17 00:00:00 2001 From: Chase Fleming <1666730+chasefleming@users.noreply.github.com> Date: Wed, 14 Aug 2024 17:02:04 -0700 Subject: [PATCH] Add readme for fragment --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index de0add4..43338f6 100644 --- a/README.md +++ b/README.md @@ -205,6 +205,25 @@ comment := elem.Comment("Section: Main Content Start") // Generates: ``` +### Grouping Elements with Fragment + +The `Fragment` function allows you to group multiple elements together without adding an extra wrapper element to the DOM. This is particularly useful when you want to merge multiple nodes into the same parent element without any additional structure. + +```go +nodes := []elem.Node{ + elem.P(nil, elem.Text("1")), + elem.P(nil, elem.Text("2")), +} + +content := elem.Div(nil, + elem.P(nil, elem.Text("0")), + elem.Fragment(nodes...), + elem.P(nil, elem.Text("3")), +) +``` + +In this example, the Fragment function is used to insert the nodes into the parent div without introducing any additional wrapper elements. This keeps the HTML output clean and simple. + ## Advanced CSS Styling with `StyleManager` For projects requiring advanced CSS styling capabilities, including support for animations, pseudo-classes, and responsive design via media queries, the `stylemanager` subpackage offers a powerful solution. Integrated seamlessly with `elem-go`, it allows developers to programmatically create and manage complex CSS styles within the type-safe environment of Go.