Text areas
{#
Accepts:
- "id" (string): textarea id (optional, default: default-id)
- "name" (string): textarea name (mandatory, default: default-name)
- "rows" (int): number of rows (optional, default: 4)
- "label" (string): label text (optional, default: '')
- "isDisabled" (boolean): is disabled (optional, default: false)
- "hasError" (boolean): has error (optional, default: false)
- "extraClass" (string): extra CSS classes (optional, default: '')
- "extraAttributes" (string): extra attributes (optional, default: '')
#}
{% set id = id|default('default-id') %}
{% set name = name|default('default-name') %}
{% set rows = rows|default(4) %}
{% set label = label|default('') %}
{# Internal properties #}
{% set _cssClass = 'ecl-textarea' %}
{% set _extraAttributes = '' %}
{# Internal logic - Process properties #}
{% if hasError is defined and hasError == true %}
{% set _cssClass = _cssClass ~ ' ecl-textarea--has-error' %}
{% endif %}
{% if extraClass is defined %}
{% set _cssClass = _cssClass ~ ' ' ~ extraClass %}
{% endif %}
{% if isDisabled is defined and isDisabled == true %}
{% set _extraAttributes = _extraAttributes ~ ' disabled' %}
{% endif %}
{% if extraAttributes is defined %}
{% for attr in extraAttributes %}
{% set _extraAttributes = _extraAttributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
{% endfor %}
{% endif %}
{# Print the result #}
{% if label is defined and label != '' %}
<label for="{{ id }}" id="{{ id }}_label" aria-label="{{ id }}">{{ label }}</label>
{% endif %}
<textarea
name="{{ name }}"
id="{{ id }}"
rows="{{ rows }}"
class="{{ _cssClass }}"
role="textbox"
aria-multiline="true"
aria-labelledby="{{ id }}_label"
{{ _extraAttributes }}
>
</textarea>
/* Default */
{
"label": "Normal textarea",
"id": "example-textarea-id-1",
"extraAttributes": [
{
"name": "placeholder",
"value": "Some placeholder text."
}
]
}
/* Is Disabled */
{
"label": "Disabled textarea",
"id": "example-textarea-id-2",
"isDisabled": true,
"extraAttributes": [
{
"name": "placeholder",
"value": "Some placeholder text."
}
]
}
/* Has Error */
{
"label": "Textarea with error",
"id": "example-textarea-id-3",
"hasError": true,
"extraAttributes": [
{
"name": "placeholder",
"value": "Some placeholder text."
}
]
}
<!-- Default -->
<label for="example-textarea-id-1" id="example-textarea-id-1_label" aria-label="example-textarea-id-1">Normal textarea</label>
<textarea name="default-name" id="example-textarea-id-1" rows="4" class="ecl-textarea" role="textbox" aria-multiline="true" aria-labelledby="example-textarea-id-1_label" placeholder="Some placeholder text.">
</textarea>
<!-- Is Disabled -->
<label for="example-textarea-id-2" id="example-textarea-id-2_label" aria-label="example-textarea-id-2">Disabled textarea</label>
<textarea name="default-name" id="example-textarea-id-2" rows="4" class="ecl-textarea" role="textbox" aria-multiline="true" aria-labelledby="example-textarea-id-2_label" disabled placeholder="Some placeholder text.">
</textarea>
<!-- Has Error -->
<label for="example-textarea-id-3" id="example-textarea-id-3_label" aria-label="example-textarea-id-3">Textarea with error</label>
<textarea name="default-name" id="example-textarea-id-3" rows="4" class="ecl-textarea ecl-textarea--has-error" role="textbox" aria-multiline="true" aria-labelledby="example-textarea-id-3_label" placeholder="Some placeholder text.">
</textarea>
-
Content:
/** * Textarea component * @define textarea */ .ecl-textarea { background-color: #fff; background-image: none; border: 1px solid $ecl-color-shade; color: $ecl-color-shade; display: block; font-family: $ecl-font-family-sans-serif; font-size: map-get($ecl-font-size, 's'); line-height: 1.6; margin: 0; padding: map-get($ecl-spacing, 'xxxs') map-get($ecl-spacing, 'xxs'); width: 100%; /* stylelint-disable-next-line plugin/selector-bem-pattern */ * + & { margin-top: map-get($ecl-spacing, 'xs'); } &:focus { border-color: map-get($ecl-colors, 'yellow-110'); outline: 3px solid map-get($ecl-colors, 'yellow-110'); outline-offset: 0; text-decoration: none; } &[disabled], &--is-disabled, &[readonly], &--is-readonly { background-color: #eee; cursor: not-allowed; opacity: 1; } } .ecl-textarea--has-error { border-color: $ecl-color-error; &:focus { border-color: darken($ecl-color-error, 10%); outline-color: darken($ecl-color-error, 10%); } }
- URL: /components/raw/ecl-forms-textareas/ecl-textareas.scss
- Filesystem Path: framework/components/ecl-forms/ecl-forms-textareas/ecl-textareas.scss
- Size: 1 KB
- Handle: @ec-europa/ecl-forms-textareas
- Tags: atom
- Preview:
- Filesystem Path: framework/components/ecl-forms/ecl-forms-textareas/ecl-forms-textareas.twig