Barmer Fractal

Contact Flyout Panel: With Back Button 

<div class="m-contact-flyout-panel ">

    <button class="a-btn btn--back" type="button" aria-label="Zurück"><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>

    <h2 class="contact-flyout-panel__title">
        <i class="a-icon icon--message" aria-hidden="true"></i>
        E-Mail
    </h2>

    <button class="a-btn btn--close" type="button" aria-label="Schließt das Menü"><i class="a-icon icon--close" aria-hidden="true"></i></button>

</div>
 
<div class="m-contact-flyout-panel {{viewtypes.specifier}}">

  {{#switches.hasBackButton}}
    {{ render '@button--back' this.partials.back merge=true }}
  {{/switches.hasBackButton}}
  {{^switches.hasBackButton}}
    {{ render (stringToPartial this.partials.iconType) merge=true }}
  {{/switches.hasBackButton}}

  <h2 class="contact-flyout-panel__title">
    {{#switches.hasBackButton}}
      {{render (stringToPartial this.partials.iconType) merge=true}}
    {{/switches.hasBackButton}}
    {{content.title}}
  </h2>

  {{ render '@button--close' merge=true }}
</div>
 
{
  "switches": {
    "hasBackButton": true
  },
  "viewtypes": {
    "specifier": ""
  },
  "content": {
    "title": "E-Mail"
  },
  "partials": {
    "iconType": "icon--message",
    "back": {
      "content": {
        "label": "",
        "ariaLabel": "Zurück"
      }
    }
  }
}

No notes defined.