Barmer Fractal

Button: Language 

<button class="a-btn btn--language js-language-dropdown" type="button" aria-label="Sprache auswählen" aria-haspopup="true" aria-expanded="false" aria-controls="bm-language-menu"><i class="a-icon icon--language" aria-hidden="true"></i><span class="btn__text">DEU</span><i class="a-icon icon--arrow-downward" aria-hidden="true"></i></button>
 
{{^ switches.asLink }}
  <button class="a-btn {{viewtypes.specifier}}" type="{{content.type}}" {{{content.attributes}}} {{{content.dataAttributes}}} {{#if content.title}} title="{{content.title}}"{{/if}} {{#if content.ariaHidden}}aria-hidden="{{content.ariaHidden}}"{{/if}} {{#if content.ariaLabel}}aria-label="{{content.ariaLabel}}"{{/if}}{{#if content.ariaHasPopup}} aria-haspopup="{{content.ariaHasPopup}}"{{/if}}{{#if content.ariaExpanded}} aria-expanded="{{content.ariaExpanded}}"{{/if}}{{#if content.ariaControls}} aria-controls="{{content.ariaControls}}"{{/if}}{{#if content.ariaLabelledBy}} aria-labelledby="{{content.ariaLabelledBy}}"{{/if}}{{#switches.isDisabled}} disabled="disabled"{{/switches.isDisabled}}{{#if content.dataService}} data-service="{{content.dataService}}"{{/if}} {{#if content.dataTooltipText}}data-tooltip-text="{{content.dataTooltipText}}"{{/if}} {{#switches.isHidden}} hidden{{/switches.isHidden}} {{{content.function}}}>{{{content.before}}}{{content.label}}{{{content.after}}}{{#switches.hasIcon}}{{render (stringToPartial partials.iconType) partials.icon merge=true}}{{/switches.hasIcon}}</button>
{{/ switches.asLink}}
{{# switches.asLink }}
	<a class="a-btn {{viewtypes.specifier}}"
      href="{{content.url}}"
      title="{{content.title}}"
      {{#if switches.newWindow}}target="_blank"{{/if}}
      {{#if content.dataService}}data-service="{{content.dataService}}"{{/if}}
      {{# switches.hasDownload }}download="{{content.downloadTitle}}"{{/ switches.hasDownload}}
  >
    {{# switches.hasDownload }}
        <span class="sr-only">{{content.srDownload}}{{{content.srDownloadTitle}}}</span>
    {{/ switches.hasDownload }}
    {{{content.before}}}{{content.label}}{{{content.after}}}{{#switches.hasIcon}}{{render (stringToPartial partials.iconType) partials.icon merge=true}}{{/switches.hasIcon}}
  </a>
{{/ switches.asLink}}
 
{
  "switches": {
    "asLink": false,
    "hasIcon": true,
    "isDisabled": false
  },
  "viewtypes": {
    "specifier": "btn--language js-language-dropdown"
  },
  "content": {
    "type": "button",
    "before": "<i class=\"a-icon icon--language\" aria-hidden=\"true\"></i>",
    "label": "",
    "after": "<span class=\"btn__text\">DEU</span>",
    "url": "",
    "function": "",
    "ariaLabel": "Sprache auswählen",
    "ariaExpanded": "false",
    "ariaHasPopup": "true",
    "ariaControls": "bm-language-menu"
  },
  "partials": {
    "iconType": "icon--arrow-downward",
    "icon": {
      "switches": {
        "isAriaHidden": true
      },
      "viewtypes": {
        "specifier": "icon--arrow-downward"
      },
      "content": {
        "text": " "
      }
    }
  }
}

No notes defined.