Ionic Header und Footer

---

Header

Der Header ist eine Komponente, die oben auf dem Bildschirm fixiert ist. Er kann Titel und funktionale Schaltflächen links und rechts enthalten.

Ionic bietet standardmäßig viele Farbstile. Sie können verschiedene Stilnamen verwenden und natürlich auch einen eigenen anpassen.

bar-light

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

Ausprobieren »

bar-stable

<div class="bar bar-header bar-stable">
  <h1 class="title">bar-stable</h1>
</div>

Ausprobieren »

bar-positive

<div class="bar bar-header bar-positive">
  <h1 class="title">bar-positive</h1>
</div>

Ausprobieren »

bar-calm

<div class="bar bar-header bar-calm">
  <h1 class="title">bar-calm</h1>
</div>

Ausprobieren »

bar-balanced

<div class="bar bar-header bar-balanced">
  <h1 class="title">bar-balanced</h1>
</div>

Ausprobieren »

bar-energized

<div class="bar bar-header bar-energized">
  <h1 class="title">bar-energized</h1>
</div>

Ausprobieren »

bar-assertive

<div class="bar bar-header bar-assertive">
  <h1 class="title">bar-assertive</h1>
</div>

Ausprobieren »

bar-royal

<div class="bar bar-header bar-royal">
  <h1 class="title">bar-royal</h1>
</div>

Ausprobieren »

bar-dark

<div class="bar bar-header bar-dark">
  <h1 class="title">bar-dark</h1>
</div>

Ausprobieren »

---

Sub Header

Sub Header ist ebenfalls oben fixiert, befindet sich jedoch unterhalb des Headers. Selbst wenn der Header nicht geschrieben wird, behält der Sub-Header-Stil weiterhin den Abstand des Headers von oben. Die Farbstile sind dieselben wie beim Header.

<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

Ausprobieren »

---

Footer

Footer befindet sich am unteren Rand des Bildschirms und kann mehrere Inhaltstypen enthalten.

<div class="bar bar-footer bar-balanced">
  <div class="title">Footer</div>
</div>

Ausprobieren »

Footer ist derselbe wie der Header oben, außer dass der Stilname bar-header durch bar-footer ersetzt wird.

<div class="bar bar-footer">
  <button class="button button-clear">Left</button>
  <div class="title">Title</div>
  <button class="button button-clear">Right</button>
</div>

Ausprobieren »

Wenn der Footer außerdem keinen Titel hat, Sie aber eine Schaltfläche auf der rechten Seite benötigen, müssen Sie pull-right zur rechten Schaltfläche hinzufügen, wie:

<div class="bar bar-footer">
  <button class="button button-clear pull-right">Right</button>
</div>

Ausprobieren »

Andere Erweiterungen