Skip to content

Commit 2f88115

Browse files
committed
Update README
1 parent a64b183 commit 2f88115

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed

README.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -344,4 +344,36 @@ You can also retrieve the generated attributes as an array, which can be helpful
344344
{{ form_row(form.password, { attr: stimulus_target('hello-controller', 'a-target').toArray() }) }}
345345
```
346346

347+
### stimulus_outlet
348+
349+
The `stimulus_outlet()` Twig function can be used to render [Stimulus Outlets](https://stimulus.hotwired.dev/reference/outlets).
350+
351+
For example:
352+
353+
```twig
354+
<div {{ stimulus_outlet('controller', 'foo', '.selector') }}>Hello</div>
355+
356+
<!-- would render -->
357+
<div data-controller-foo-outlet=".selector">Hello</div>
358+
```
359+
360+
If you have multiple outlets on the same element, you can chain them as there's also a `stimulus_outlet` filter:
361+
362+
```twig
363+
<div {{ stimulus_outlet('controller', 'foo', '.selector')|stimulus_outlet('other-controller', 'bar', '#another-selector') }}>
364+
Hello
365+
</div>
366+
367+
<!-- would render -->
368+
<div data-controller-foo-outlet=".selector" data-other-controller-bar-outlet="#another-selector">
369+
Hello
370+
</div>
371+
```
372+
373+
You can also retrieve the generated attributes as an array, which can be helpful e.g. for forms:
374+
375+
```twig
376+
{{ form_row(form.password, { attr: stimulus_outlet('hello-controller', 'foo', '.selector').toArray() }) }}
377+
```
378+
347379
Ok, have fun!

0 commit comments

Comments
 (0)