EU System

Help blocks

Documentation • Demo

Help blocks

Description text to help the user know what to do.

When to use

When you need to provide the user with extra information on what he/she should input on this field.

{#
  Parameters:
    - "content" (string) (default: '')
    - "has_error" (boolean) (default: false)
    - "is_disabled" (boolean) (default: false)
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
  Blocks:
    - "help_block": main content
#}

{# Internal properties #}

{% set _css_class = 'ecl-help-block' %}
{% set _extra_attributes = '' %}
{% set _content = content|default('') %}
{% set _has_error = has_error|default(false) %}
{% set _is_disabled = is_disabled|default(false) %}

{# Internal logic - Process properties #}

{% if _has_error == true %}
  {% set _css_class = _css_class ~ ' ecl-help-block--has-error' %}
{% endif %}

{% if _is_disabled == true %}
  {% set _css_class = _css_class ~ ' ecl-help-block--disabled' %}
{% 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 #}

<p class="{{ _css_class }}"{{ _extra_attributes|raw }}>{% block help_block _content %}</p>
 
/* Default */
{
  "content": "This is some placeholder help text."
}


/* Disabled */
{
  "content": "Disabled: This is some placeholder help text.",
  "is_disabled": true
}


/* Error */
{
  "content": "On error: This is some placeholder help text.",
  "has_error": true
}


<!-- Default -->
<p class="ecl-help-block">This is some placeholder help text.</p>


<!-- Disabled -->
<p class="ecl-help-block ecl-help-block--disabled">Disabled: This is some placeholder help text.</p>


<!-- Error -->
<p class="ecl-help-block ecl-help-block--has-error">On error: This is some placeholder help text.</p>
  • Content: 
    /*
 * Help Block
 * @define help-block
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-form-help-block/generic-component-form-help-block';

// Use generic mixin
@include exports('eu-component-form-help-block') {
  @include ecl-help-block();
}
  • URL: /components/raw/eu-component-form-help-block/eu-component-form-help-block.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-form/eu-component-form-help-block/eu-component-form-help-block.scss
  • Size: 291 Bytes
  • Handle: @ecl/eu-component-form-help-block
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-form/eu-component-form-help-block/eu-component-form-help-block.twig