Forms Legends
Legends are used to add a caption to a group of related form elements that have been grouped together into a fieldset.
When to use this component
When there is a need to name a group of related input elements in a form.
{#
Parameters:
- "content" (string) (default: '')
- "level" (integer) (default: 1): 1 (in a top-level fieldset) or 2 (in a nested fieldset)
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]
Blocks:
- "legend": main content
#}
{# Internal properties #}
{% set _css_class = 'ecl-form-legend' %}
{% set _extra_attributes = '' %}
{% set _content = content|default('') %}
{% set _level = level|default('') %}
{# Internal logic - Process properties #}
{% if _level is not empty %}
{% set _css_class = _css_class ~ ' ecl-form-legend--level-' ~ _level %}
{% endif %}
{% if extra_classes is defined and extra_classes is not empty %}
{% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}
{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
{% for attr in extra_attributes %}
{% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value|e ~'"' %}
{% endfor %}
{% endif %}
{# Print the result #}
{% spaceless %}
<legend class="{{ _css_class }}"{{ _extra_attributes|raw }}>
{%- block legend _content -%}
</legend>
{% endspaceless %}
/* Level 1 */
{
"content": "Legend for a top-level fieldset",
"level": 1
}
/* Level 2 */
{
"content": "Legend for a nested fieldset",
"level": 2
}
<!-- Level 1 -->
<legend class="ecl-form-legend ecl-form-legend--level-1">Legend for a top-level fieldset</legend>
<!-- Level 2 -->
<legend class="ecl-form-legend ecl-form-legend--level-2">Legend for a nested fieldset</legend>
-
Content:
/** * Legend component * @define form-legend */ // Import base and generic @import '@ecl/ec-base/ec-base'; @import '@ecl/generic-component-form-legend/generic-component-form-legend'; // Use generic mixin @include exports('ec-component-form-legend') { @include ecl-form-legend(); }
- URL: /components/raw/ec-component-form-legend/ec-component-form-legend.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-legend/ec-component-form-legend.scss
- Size: 288 Bytes
- Handle: @ecl/ec-component-form-legend
- Tags: atom
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-legend/ec-component-form-legend.twig