ECL Spash Page component

npm package: @ecl/splash-page

``shell
npm install --save @ecl/splash-page
`

$3

- "logo" (associative array) (default: predefined structure): Logo image settings. format:
- "title" (string) (default: ''): Logo title attribute.
- "alt" (string) (default: ''): Logo alt attribute.
- "path" (string) (default: ''): Logo URL.
- "src_desktop" (string) (default: ''): Desktop logo image file path
- "src_mobile" (string) (default: ''): Mobile logo image file path for EU only
- "title" (string) (default: ''): Page title, eg. 'Select your language'
- "eu_category" (string) (default: ''): Label for EU languages
- "non_eu_category" (string) (default: ''): Label for non-EU languages
- "items" (array) (default: []): (array) (default: []): format: [
{
"lang" (string) (default: '') Item language code, eg. 'en', 'fr', etc.
"label" (string) (default: '') Item language label, eg. 'English', 'Français', etc.
"path" (string) (default: '') Item language URL eg. '/example#language_en'.
"active" (boolean) (default: false) define if item is the active language.
},
],
- "non_eu_items" (array) (default: []): (array) (default: []): format: [
{
"lang" (string) (default: '') Item language code, eg. 'en', 'fr', etc.
"label" (string) (default: '') Item language label, eg. 'English', 'Français', etc.
"path" (string) (default: '') Item language URL eg. '/example#language_en'.
"active" (boolean) (default: false) define if item is the active language.
},
],
- "extra_classes" (optional) (string) (default: '') Extra classes (space separated)
- "extra_attributes" (optional) (array) (default: []) Extra attributes
- "name" (string) Attribute name, eg. 'data-test'
- "value" (string) Attribute value, eg: 'data-test-1'

$3


`twig
{% include '@ecl/splash-page/splash-page.html.twig' with {
logo: {
alt: 'European Commission',
path: exampleLink,
src_desktop: '/logo-ec--en.svg',
src_mobile: '/logo-ec--mute.svg',
},
title: 'Select your language',
eu_category: 'Official EU languages:',
non_eu_category: 'Other languages:',
items: [
{ label: 'български', path: /example#language_bg, lang: 'bg' },
{ label: 'español', path: /example#language_es, lang: 'es' },
...
],
non_eu_items: [
{ label: 'عَرَبِيّ', path: /example#language_ar, lang: 'ar' },
...
],
extra_classes: 'my-extra-class-1 my-extra-class-2',
extra_attributes: [
{ name: 'data-test', value: 'data-test-value' },
{ name: 'data-test-1', value: 'data-test-value-1' },
...
],
} %}
``