Vebego Component Library

Language Select 

<div class='mol-language-select'>
        <input type='checkbox' id='lang-select-checkbox' class='lang-select-checkbox' />
        <label for='lang-select-checkbox' class='lang-select-label'>
            <span class='text'>NL</span>
            <span class="atm-icon  far fa-chevron-down  fa-xs "></span>
        </label>
        <div class='lang-select-sub'>
            <ul>
                <li><a class="atm-nav-link " href="#" title="" aria-label="" target="">EN</a>
                </li>
                <li><a class="atm-nav-link " href="#" title="" aria-label="" target="">DE</a>
                </li>
                <li><a class="atm-nav-link " href="#" title="" aria-label="" target="">FR</a>
                </li>
            </ul>
        </div>
    </div>
 
{{#if otherLangs}}
    <div class='mol-language-select'>
        <input
            type='checkbox'
            id='{{checkboxId}}'
            class='lang-select-checkbox'
        />
        <label for='{{checkboxId}}' class='lang-select-label'>
            <span class='text'>{{currentLang.text}}</span>
            {{render '@icon' @root.dropDownIcon}}
        </label>
        <div class='lang-select-sub'>
            <ul>
                {{#each otherLangs}}
                    <li>{{render '@nav-link' this}}</li>
                {{/each}}
            </ul>
        </div>
    </div>
{{/if}}
 
{
  "checkboxId": "lang-select-checkbox",
  "dropDownIcon": {
    "icon": "fa-chevron-down",
    "style": "far",
    "size": "fa-xs"
  },
  "currentLang": {
    "text": "NL"
  },
  "otherLangs": [
    {
      "text": "EN",
      "href": "#"
    },
    {
      "text": "DE",
      "href": "#"
    },
    {
      "text": "FR",
      "href": "#"
    }
  ]
}
  • Content: 
    .mol-language-select {
    @apply relative;

    .lang-select-checkbox {
        @apply hidden;
    }

    .lang-select-label {
        @apply cursor-pointer;
        @apply select-none;
        @apply flex;
        @apply flex-nowrap;
        @apply items-center;

        .text {
            @apply font-display cursor-pointer mr-2;
        }
    }

    .lang-select-sub {
        @apply absolute z-10;
        @apply min-w-max;
        @apply opacity-0 pointer-events-none;
        @apply shadow-lg bg-white;
        @apply p-4 pr-8 -left-4;
        @apply select-none;
        top: 30px;

        /* Lang nav */
        > ul {
            /* Lang item */
            > li {
                + li {
                    @apply mt-2;
                }

                > .atm-nav-link {
                    @apply font-normal no-underline;
                }
            }
        }
    }

    .lang-select-checkbox:checked {
        ~ .lang-select-label {
        }

        ~ .lang-select-sub {
            @apply opacity-100 pointer-events-auto;
        }
    }
}
  • URL: /components/raw/language-select/language-select.css
  • Filesystem Path: src\components\03-molecules\language-select\language-select.css
  • Size: 1.1 KB
  • Content: 
    (function () {
    // Close lang menu when clicked outside
    $(document).on('mouseup', function (e) {
        var container = $('.mol-language-select .lang-select-sub').parent();

        // If the target of the click isn't the container
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            // Close submenu
            $('.mol-language-select .lang-select-checkbox:checked').trigger(
                'click'
            );
        }
    });
})();
  • URL: /components/raw/language-select/language-select.js
  • Filesystem Path: src\components\03-molecules\language-select\language-select.js
  • Size: 502 Bytes

No notes defined.