@@ -204,160 +204,11 @@ different ways:
204
204
Stimulus / Symfony UX Helper
205
205
----------------------------
206
206
207
- stimulus_controller
208
- ~~~~~~~~~~~~~~~~~~~
209
-
210
- This bundle also ships with a special ``stimulus_controller() `` Twig function
211
- that can be used to render `Stimulus Controllers & Values `_ and `CSS Classes `_.
212
- See `stimulus-bridge `_ for more details.
213
-
214
- For example:
215
-
216
- .. code-block :: html+twig
217
-
218
- <div {{ stimulus_controller('chart', { 'name': 'Likes', 'data': [1, 2, 3, 4] }) }}>
219
- Hello
220
- </div>
221
-
222
- <!-- would render -->
223
- <div
224
- data-controller="chart"
225
- data-chart-name-value="Likes"
226
- data-chart-data-value="[1,2,3,4]"
227
- >
228
- Hello
229
- </div>
230
-
231
- If you want to set CSS classes:
232
-
233
- .. code-block :: html+twig
234
-
235
- <div {{ stimulus_controller('chart', { 'name': 'Likes', 'data': [1, 2, 3, 4] }, { 'loading': 'spinner' }) }}>
236
- Hello
237
- </div>
238
-
239
- <!-- would render -->
240
- <div
241
- data-controller="chart"
242
- data-chart-name-value="Likes"
243
- data-chart-data-value="[1,2,3,4]"
244
- data-chart-loading-class="spinner"
245
- >
246
- Hello
247
- </div>
248
-
249
- <!-- or without values -->
250
- <div {{ stimulus_controller('chart', controllerClasses = { 'loading': 'spinner' }) }}>
251
- Hello
252
- </div>
253
-
254
- Any non-scalar values (like ``data: [1, 2, 3, 4] ``) are JSON-encoded. And all
255
- values are properly escaped (the string ``[ `` is an escaped
256
- ``[ `` character, so the attribute is really ``[1,2,3,4] ``).
257
-
258
- If you have multiple controllers on the same element, you can chain them as there's also a ``stimulus_controller `` filter:
259
-
260
- .. code-block :: html+twig
261
-
262
- <div {{ stimulus_controller('chart', { 'name': 'Likes' })|stimulus_controller('other-controller') }}>
263
- Hello
264
- </div>
265
-
266
- You can also retrieve the generated attributes as an array, which can be helpful e.g. for forms:
267
-
268
- .. code-block :: twig
269
-
270
- {{ form_start(form, { attr: stimulus_controller('chart', { 'name': 'Likes' }).toArray() }) }}
271
-
272
- stimulus_action
273
- ~~~~~~~~~~~~~~~
274
-
275
- The ``stimulus_action() `` Twig function can be used to render `Stimulus Actions `_.
276
-
277
- For example:
278
-
279
- .. code-block :: html+twig
280
-
281
- <div {{ stimulus_action('controller', 'method') }}>Hello</div>
282
- <div {{ stimulus_action('controller', 'method', 'click') }}>Hello</div>
283
-
284
- <!-- would render -->
285
- <div data-action="controller#method">Hello</div>
286
- <div data-action="click->controller#method">Hello</div>
287
-
288
- If you have multiple actions and/or methods on the same element, you can chain them as there's also a
289
- ``stimulus_action `` filter:
290
-
291
- .. code-block :: html+twig
292
-
293
- <div {{ stimulus_action('controller', 'method')|stimulus_action('other-controller', 'test') }}>
294
- Hello
295
- </div>
296
-
297
- <!-- would render -->
298
- <div data-action="controller#method other-controller#test">
299
- Hello
300
- </div>
301
-
302
- You can also retrieve the generated attributes as an array, which can be helpful e.g. for forms:
303
-
304
- .. code-block :: twig
305
-
306
- {{ form_row(form.password, { attr: stimulus_action('hello-controller', 'checkPasswordStrength').toArray() }) }}
307
-
308
- You can also pass `parameters `_ to actions:
309
-
310
- .. code-block :: html+twig
311
-
312
- <div {{ stimulus_action('hello-controller', 'method', 'click', { 'count': 3 }) }}>Hello</div>
313
-
314
- <!-- would render -->
315
- <div data-action="click->hello-controller#method" data-hello-controller-count-param="3">Hello</div>
316
-
317
- stimulus_target
318
- ~~~~~~~~~~~~~~~
319
-
320
- The ``stimulus_target() `` Twig function can be used to render `Stimulus Targets `_.
321
-
322
- For example:
323
-
324
- .. code-block :: html+twig
325
-
326
- <div {{ stimulus_target('controller', 'a-target') }}>Hello</div>
327
- <div {{ stimulus_target('controller', 'a-target second-target') }}>Hello</div>
328
-
329
- <!-- would render -->
330
- <div data-controller-target="a-target">Hello</div>
331
- <div data-controller-target="a-target second-target">Hello</div>
332
-
333
- If you have multiple targets on the same element, you can chain them as there's also a `stimulus_target ` filter:
334
-
335
- .. code-block :: html+twig
336
-
337
- <div {{ stimulus_target('controller', 'a-target')|stimulus_target('other-controller', 'another-target') }}>
338
- Hello
339
- </div>
340
-
341
- <!-- would render -->
342
- <div data-controller-target="a-target" data-other-controller-target="another-target">
343
- Hello
344
- </div>
345
-
346
- You can also retrieve the generated attributes as an array, which can be helpful e.g. for forms:
347
-
348
- .. code-block :: twig
349
-
350
- {{ form_row(form.password, { attr: stimulus_target('hello-controller', 'a-target').toArray() }) }}
351
-
352
- Ok, have fun!
353
-
207
+ The ``stimulus_controller() ``, ``stimulus_action() `` and ``stimulus_target() ``
208
+ Twig functions are deprecated in WebpackEncoreBundle 1.17.0. Install and
209
+ use `symfony/stimulus-bundle `_ for that functionality.
354
210
355
211
.. _`Webpack Encore` : https://symfony.com/doc/current/frontend.html
356
212
.. _`enable the bundle manually` : https://symfony.com/doc/current/bundles.html
357
213
.. _`"splits" your files` : https://webpack.js.org/plugins/split-chunks-plugin/
358
- .. _`Stimulus Controllers & Values` : https://stimulus.hotwired.dev/reference/values
359
- .. _`CSS Classes` : https://stimulus.hotwired.dev/reference/css-classes
360
- .. _`stimulus-bridge` : https://github.com/symfony/stimulus-bridge
361
- .. _`Stimulus Actions` : https://stimulus.hotwired.dev/reference/actions
362
- .. _`parameters` : https://stimulus.hotwired.dev/reference/actions#action-parameters
363
- .. _`Stimulus Targets` : https://stimulus.hotwired.dev/reference/targets
214
+ .. _`symfony/stimulus-bundle` : https://symfony.com/bundles/StimulusBundle/current/index.html
0 commit comments