kepala dan bawah ionik

Pengepala

Pengepala ialah komponen yang ditetapkan di bahagian atas skrin, yang boleh termasuk tajuk dan butang fungsi kiri dan kanan.

ionik menyediakan banyak gaya warna secara lalai Anda boleh memanggil nama gaya yang berbeza, dan sudah tentu anda boleh menyesuaikan satu.

lampu bar

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

stabil bar

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

positif bar

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

bar-tenang

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

bar-seimbang

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

bar-bertenaga

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

bar-asertif

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

bar-royal

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

bar-dark

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

Sub Header (sari kata)

Sub Header juga ditetapkan di bahagian atas, cuma Ia berada di bawah Pengepala Walaupun Pengepala tidak ditulis, gaya Sub Pengepala akan berada satu Pengepala dari bahagian atas. Gaya warna adalah sama dengan Pengepala.

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

Footer (bawah)

Footer berada di bahagian bawah skrin dan boleh mengandungi berbilang jenis kandungan.

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

Footer adalah sama dengan Header di atas, kecuali nama gaya bar-header digantikan dengan bar-footer.

<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>

Selain itu, jika tiada tajuk di bahagian bawah, tetapi anda memerlukan butang di sebelah kanan, anda perlu menambah tarik-kanan pada butang di sebelah kanan seperti:

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