EU System

Language select (Site)

Documentation • Demo

Language selector | Site level

Why and how to use this component

The language selector allows users to switch from one language to another.

By clicking on the language selector, a list of available languages is displayed. The user can then select the language of their choice (splash page).

If the site is only in one language, the corporate language selector must be implemented, but without any link (only indicating the current language).

When to use this component

  • on the site header
{#
  Parameters:
    - "language" (string) (default: 'English'): current language
    - "code" (string) (default: 'en'): current language ISO code
    - "link" (string) (default: '#')
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-lang-select-site' with {
  'language': language|default('English'),
  'code': code|default('en'),
  'link': link|default('#'),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([])
} only %}
 
{
  "language": "English",
  "href": "../../example.html#",
  "code": "en"
}
 
<div class="ecl-lang-select-sites">
  <a href="#" class="ecl-lang-select-sites__link">
    <span class="ecl-lang-select-sites__label">English</span>
    <span class="ecl-lang-select-sites__code">
      <span class="ecl-icon ecl-icon--language ecl-lang-select-sites__icon"></span>
      <span class="ecl-lang-select-sites__code-text">en</span>
    </span>
  </a>
</div>
  • Content: 
    /**
 * Language select (Site)
 * @define lang-select-sites
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-lang-select-site/generic-component-lang-select-site';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('eu-style-icon'));

// Use generic mixin
@include exports('eu-component-lang-select-site') {
  @include ecl-lang-select-site();
}
  • URL: /components/raw/eu-component-lang-select-site/eu-component-lang-select-site.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-lang-select-site/eu-component-lang-select-site.scss
  • Size: 430 Bytes
  • Handle: @ecl/eu-component-lang-select-site
  • Tags: molecule
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-lang-select-site/eu-component-lang-select-site.twig