Skip to content

Commit 1fa2503

Browse files
committed
doc: stimulus_action() and stimulus_target()
Following #124 and #124 (comment)
1 parent 16d6f67 commit 1fa2503

File tree

1 file changed

+63
-1
lines changed

1 file changed

+63
-1
lines changed

README.md

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,9 @@ class ScriptNonceSubscriber implements EventSubscriberInterface
199199
}
200200
```
201201

202-
## Stimulus / Symfony UX Helper: stimulus_controller
202+
## Stimulus / Symfony UX Helper
203+
204+
### stimulus_controller
203205

204206
This bundle also ships with a special `stimulus_controller()` Twig function
205207
that can be used to render [Stimulus Controllers & Values](https://stimulus.hotwire.dev/reference/values).
@@ -238,4 +240,64 @@ associative array in the first argument:
238240
</div>
239241
```
240242

243+
### stimulus_action
244+
245+
The `stimulus_action()` Twig function can be used to render [Stimulus Actions](https://stimulus.hotwire.dev/reference/actions).
246+
247+
For example:
248+
```twig
249+
<div {{ stimulus_action('controller', 'method') }}>Hello</div>
250+
<div {{ stimulus_action('controller', 'method', 'click') }}>Hello</div>
251+
252+
<!-- would render -->
253+
<div data-action="controller#method">Hello</div>
254+
<div data-action="click->controller#method">Hello</div>
255+
```
256+
257+
If you have multiple actions and/or methods on the same element, pass them all as an
258+
associative array in the first argument:
259+
```twig
260+
<div {{ stimulus_action({
261+
'controller': 'method',
262+
'other-controller': ['method', {'window@resize': 'onWindowResize'}]
263+
}) }}>
264+
Hello
265+
</div>
266+
267+
<!-- would render -->
268+
<div data-action="controller#method other-controller#method window@resize->other-controller#onWindowResize">
269+
Hello
270+
</div>
271+
```
272+
273+
### stimulus_target
274+
275+
The `stimulus_target()` Twig function can be used to render [Stimulus Targets](https://stimulus.hotwire.dev/reference/targets).
276+
277+
For example:
278+
```twig
279+
<div {{ stimulus_target('controller', 'a-target') }}>Hello</div>
280+
<div {{ stimulus_target('controller', 'a-target second-target') }}>Hello</div>
281+
282+
<!-- would render -->
283+
<div data-controller-target="a-target">Hello</div>
284+
<div data-controller-target="a-target second-target">Hello</div>
285+
```
286+
287+
If you have multiple targets on the same element, pass them all as an
288+
associative array in the first argument:
289+
```twig
290+
<div {{ stimulus_target({
291+
'controller': 'a-target',
292+
'other-controller': 'another-target'
293+
}) }}>
294+
Hello
295+
</div>
296+
297+
<!-- would render -->
298+
<div data-controller-target="a-target" data-other-controller-target="another-target">
299+
Hello
300+
</div>
301+
```
302+
241303
Ok, have fun!

0 commit comments

Comments
 (0)