Vebego Component Library

Identifier 

<div class='mol-language-select selector'>
    <div class='selector-label selector-wrapper'>
        <span class='text'>NL</span>
        <button> <i class="atm-icon  far fa-chevron-down  fa-xs "></i>
        </button>
    </div>
    <div class='selector-sub'>
        <ul>
            <li class="selector-item selector-item--de">
                <span>/</span>
                <a class="atm-nav-link " href="#" title="" aria-label="" target="">DE</a>

            </li>
            <li class="selector-item selector-item--fr">
                <span>/</span>
                <a class="atm-nav-link " href="#" title="" aria-label="" target="">FR</a>

            </li>
            <li class="selector-item selector-item--en">
                <span>/</span>
                <a class="atm-nav-link " href="#" title="" aria-label="" target="">EN</a>

            </li>
        </ul>
    </div>
</div>
 
<div class='mol-language-select selector'>
        <div class='selector-label selector-wrapper'>
            <span class='text'>{{current.text}}</span>
            <button>{{render '@icon' @root.dropDownIcon}}</button>
        </div>
        <div class='selector-sub'>
            <ul>
                {{#each other}}
                    <li class="selector-item selector-item--{{this.class}}">
                        <span>/</span>        
                        {{render '@nav-link' this}}
                    </li>
                {{/each}}
            </ul>
        </div>
    </div>
 
{
  "modifier": "default",
  "checkboxId": "lang-select-checkbox",
  "dropDownIcon": {
    "icon": "fa-chevron-down",
    "style": "far",
    "size": "fa-xs"
  },
  "arrowIcon": {
    "icon": "fa-arrow-right",
    "style": "far"
  },
  "current": {
    "text": "NL"
  },
  "other": [
    {
      "text": "DE",
      "class": "de",
      "href": "#"
    },
    {
      "text": "FR",
      "class": "fr",
      "href": "#"
    },
    {
      "text": "EN",
      "class": "en",
      "href": "#"
    }
  ]
}

No notes defined.