Skip to content

Commit 0de41ea

Browse files
authored
Add some more PatchElement examples to the SDK ADR (#941)
* Add some more PatchElement examples to the SDK ADR * Add description of the elements parameter Split example block and move with other examples
1 parent b7ff0f7 commit 0de41ea

File tree

1 file changed

+45
-1
lines changed

1 file changed

+45
-1
lines changed

sdk/README.md

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,47 @@ data: elements </div>
144144
```
145145
</details>
146146

147+
<details>
148+
<summary>Patch elements based on their id</summary>
149+
150+
```
151+
event: datastar-patch-elements
152+
data: elements <div id="id1">New content.</div>
153+
data: elements <div id="id2">Other new content.</div>
154+
```
155+
</details>
156+
157+
<details>
158+
<summary>Insert a new element based on a selector</summary>
159+
160+
```
161+
event: datastar-patch-elements
162+
data: mode append
163+
data: selector #mycontainer
164+
data: elements <div>New content</div>
165+
```
166+
</details>
167+
168+
<details>
169+
<summary>Remove elements based on a selector</summary>
170+
171+
```
172+
event: datastar-patch-elements
173+
data: mode remove
174+
data: selector #feed, #otherid
175+
```
176+
</details>
177+
178+
<details>
179+
<summary>Remove elements without a selector</summary>
180+
181+
```
182+
event: datastar-patch-elements
183+
data: mode remove
184+
data: elements <div id="first"></div><div id="second"></div>
185+
```
186+
</details>
187+
147188
`PatchElements` sends HTML elements to the browser for DOM manipulation.
148189

149190
> [!TIP]
@@ -162,6 +203,9 @@ data: elements </div>
162203

163204
### Parameters
164205

206+
- **elements**: One or more complete HTML elements. If a selector has not been specified, each element must contain an
207+
id. With ElementPatchMode remove, this parameter may be omitted when a selector is supplied.
208+
165209
#### ElementPatchMode
166210

167211
String enum defining how elements are patched into the DOM.
@@ -183,7 +227,7 @@ String enum defining how elements are patched into the DOM.
183227

184228
| Parameter | Type | Default | Description |
185229
|-----------|------|---------|-------------|
186-
| `selector` | string | Element's `id` | CSS selector for target element |
230+
| `selector` | string | Element's `id` | CSS selector for target element. If a selector is not specified, each element must have an id specified. |
187231
| `mode` | ElementPatchMode | `outer` | How to patch the element |
188232
| `useViewTransition` | boolean | `false` | Enable view transitions API |
189233

0 commit comments

Comments
 (0)