Fixed Bars

Mit Fixed Bars kann man fest verankerte Leisten erstellen, die am oberen oder unteren Bildrand immer sichtbar sind.
Dorthinein können Logos, Button, Hamburger o.ä. verbaut werden.

Beispiele

Figma Component

Fixed Bars sind im Figma vorbereitet (nur für den oberen Bildrand). Die Komponente heißte Fixed Bar.
Um sie als Fixed Bar am unteren Bildrand zu nutzen, müsste beim Einsatz von Drop-Shadow die Richtung des Schattenwurfs angepasst werden.

Code

Fixed Bars können mit einfachem HTML erstellt werden. Jedes HTML Block-Level Element kann folgende Layout-Eigenschaften erhalten:

isFixedTop
isFixedBottom hasLightDropshadow hasHeavyDropshadow

Einfaches Code-Beispiel:

<div data-layout=“isFixedTop hasLightDropshadow“>
<!-- content data here -->
</div>

Fixed Bar am oberen Bildschirmrand. Als Beispiel sind hier ein Logo und ein Hamburger Button verbaut.

Fixed Bar am unteren Bildschirmrand. Diese beinhaltet beispielhaft eine Navigations- und Interaktions-Buttons.

Fixed Bars Component im Figma

Komplexes Codes-Beispiel: Fixed Bar mit Logo und Hamburger

<div id=“identity“ data-layout=“isFixedTop hasHeavyDropshadow“>
<figure class=“logo“>
<img src=“img/logo.svg“ alt=“logo“ />
</figure>
<button id=“hamburger“></button>
</div>