@@ -82,6 +82,8 @@ You can disable it by passing ``use_toggle_form_theme`` option to ``false``::
82
82
83
83
*Note *: If you choose to disable provided package form theme, you will have to handle styling by yourself.
84
84
85
+ .. _ux-password-customizing-labels-and-icons :
86
+
85
87
Customizing Labels and Icons
86
88
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
87
89
@@ -264,29 +266,34 @@ Then in your form, add your controller as an HTML attribute::
264
266
Usage without Symfony Forms
265
267
---------------------------
266
268
267
- You can also use the TogglePassword with native HTML inputs:
269
+ You can also use the TogglePassword with native HTML inputs. Inside the ``stimulus_controller() ``
270
+ function you can use the same :ref: `options to customize labels and icons <ux-password-customizing-labels-and-icons >`
271
+ shown in previous sections:
268
272
269
273
.. code-block :: html+twig
270
274
271
- // ...
275
+ {# ... #}
272
276
273
- <div class="toggle-password-container"> // Add "toggle-password-container" or a class that applies position: relative to this container.
277
+ {# add "toggle-password-container" or a class that applies "position: relative" to this container #}
278
+ <div class="toggle-password-container">
274
279
<label for="password">Password</label>
275
280
<input
276
281
id="password"
277
282
name="password"
278
283
type="password"
279
284
{{ stimulus_controller('symfony/ux-toggle-password/toggle-password', {
280
- {# visibleLabel: 'Show password', // If you want to modify this label. #}
281
- {# visibleIcon: 'Some svg icon', // If you want to modify this icon. #}
282
- {# hiddenLabel: 'Hide password', // If you want to modify this label. #}
283
- {# hiddenIcon: 'Some svg icon', // If you want to modify this icon. #}
284
- buttonClasses: ['toggle-password-button'], // Add as many classes as you wish. "toggle-password-button" is needed to activate the default CSS.
285
+ visibleLabel: 'Show password',
286
+ visibleIcon: 'Name of some SVG icon',
287
+ hiddenLabel: 'Hide password',
288
+ hiddenIcon: 'Name of some SVG icon',
289
+ # you can add your own CSS classes if needed, but the following
290
+ # CSS class is required to activate the default styles
291
+ buttonClasses: ['toggle-password-button'],
285
292
}) }}
286
293
>
287
294
</div>
288
295
289
- // ...
296
+ {# ... #}
290
297
291
298
Backward Compatibility promise
292
299
------------------------------
0 commit comments