@@ -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
204206This bundle also ships with a special ` stimulus_controller() ` Twig function
205207that 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+
241303Ok, have fun!
0 commit comments