Skip to content

Commit b4a15fa

Browse files
committed
Update README
1 parent 7d2a8e2 commit b4a15fa

File tree

1 file changed

+44
-1
lines changed

1 file changed

+44
-1
lines changed

README.md

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ class ScriptNonceSubscriber implements EventSubscriberInterface
204204
### stimulus_controller
205205

206206
This bundle also ships with a special `stimulus_controller()` Twig function
207-
that can be used to render [Stimulus Controllers & Values](https://stimulus.hotwired.dev/reference/values)
207+
that can be used to render [Stimulus Controllers & Values](https://stimulus.hotwired.dev/reference/values), [Outlets](https://stimulus.hotwired.dev/reference/outlets)
208208
and [CSS Classes](https://stimulus.hotwired.dev/reference/css-classes).
209209
See [stimulus-bridge](https://github.com/symfony/stimulus-bridge) for more details.
210210

@@ -260,6 +260,17 @@ If you have multiple controllers on the same element, you can chain them as ther
260260
</div>
261261
```
262262

263+
If you need to attach an outlet to some controller, you can call the addOutlet() method.
264+
265+
For example:
266+
267+
```twig
268+
<div {{ stimulus_controller('foo').addOutlet('bar', '.bar') }}>Hello</div>
269+
270+
<!-- would render -->
271+
<div data-controller="foo" data-foo-bar-outlet=".bar">Hello</div>
272+
```
273+
263274
You can also retrieve the generated attributes as an array, which can be helpful e.g. for forms:
264275

265276
```twig
@@ -344,4 +355,36 @@ You can also retrieve the generated attributes as an array, which can be helpful
344355
{{ form_row(form.password, { attr: stimulus_target('hello-controller', 'a-target').toArray() }) }}
345356
```
346357

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

0 commit comments

Comments
 (0)