Skip to content

Commit

Permalink
Add comments and new elements to readme
Browse files Browse the repository at this point in the history
  • Loading branch information
chasefleming committed Nov 11, 2023
1 parent e2593f3 commit d1de2fa
Showing 1 changed file with 26 additions and 1 deletion.
27 changes: 26 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ import (

### Creating Elements

Here's an example of creating a `<div>` element with nested `<h1>`, `<h2>`, and `<p>` elements using elem:

```go
content := elem.Div(attrs.Props{
attrs.ID: "container",
Expand All @@ -42,6 +44,16 @@ content := elem.Div(attrs.Props{
)
```

When the above Go code is executed and the `.Render()` method is called, it produces the following HTML:

```html
<div id="container" class="my-class">
<h1>Hello, Elem!</h1>
<h2>Subheading</h2>
<p>This is a paragraph.</p>
</div>
```

### Attributes and Styles

The `attrs` subpackage provides type-safe attribute functions that ensure you're setting valid attributes for your elements. This helps eliminate potential issues at runtime due to misspelled or unsupported attribute names.
Expand Down Expand Up @@ -78,10 +90,14 @@ See the complete list of supported attributes in [the `attrs` package](./attrs/a

### Rendering Elements

The `.Render()` method is used to convert the structured Go elements into HTML strings. This method is essential for generating the final HTML output that can be served to a web browser or integrated into templates.

```go
html := content.Render()
```

In this example, content refers to an elem element structure. When the `.Render()` method is called on content, it generates the HTML representation of the constructed elements.

### Generating Lists of Elements with `TransformEach`

With `elem`, you can easily generate lists of elements from slices of data using the `TransformEach` function. This function abstracts the repetitive task of iterating over a slice and transforming its items into elements.
Expand Down Expand Up @@ -127,10 +143,19 @@ In this example, if `isAdmin` is `true`, the `Admin Panel` link is rendered. Oth
- **Grouping Content**: `Div`, `Span`, `Li`, `Ul`, `Ol`, `Dl`, `Dt`, `Dd`
- **Tables**: `Table`, `Tr`, `Td`, `Th`, `TBody`, `THead`, `TFoot`
- **Hyperlinks and Multimedia**: `Img`
- **Embedded Content**: `Iframe`
- **Embedded Content**: `Audio`, `Iframe`, `Source`, `Video`
- **Script-supporting Elements**: `Script`, `Noscript`
- **Inline Semantic**: `A`, `Strong`, `Em`, `Code`, `I`

### Additional Utility: HTML Comments

Apart from standard elements, `elem-go` also allows you to insert HTML comments using the `Comment` function:

```go
comment := elem.Comment("Section: Main Content Start")
// Generates: <!-- Section: Main Content Start -->
```

## HTMX Integration

We provide a subpackage for htmx integration. [Read more about htmx integration here](HTMX_INTEGRATION.md).
Expand Down

0 comments on commit d1de2fa

Please sign in to comment.