Cara Membuat Header Dan Footer Di Ionic

Tutorial Ionic Part 4 : Cara Membuat Header Dan Footer Di Ionic


Cara Membuat Header Dan Footer Di Ionic

Cara Membuat Header Dan Footer Di Ionic – hampir semua aplikasi baik itu mobile maupun web memiliki dua komponen ini (header dan footer) untuk membuat aplikasi tampil menarik. header merupakan kepala atau bagian atas aplikasi, biasanya pada header ini tempat di letakkanya menu yang tersedia pada aplikasi. sedangkan footer (kaki) merupakan bagian paling bawah tampilan aplikasi.

Cara Membuat Header Dan Footer Di Ionic

Header Dan Footer

pada artikel kali saya akan membahas bagaimana Cara Membuat Header Dan Footer Di Ionic. sebenarnya pada framework ionic sudah disediakan fungsi khusus untuk membuat kedua komponen ini, jadi kita tinggal mengaksesnya saja dalam aplikasi yang kita buat. oke mari kita mulai penerapan dalam syntak programnya :

Cara Membuat Header Dan Footer Di Ionic

  1. buat aplikasi ionic dengan menggunakan template blank (jika belum mengerti cara membuat projek ionic silahkan baca artikel sebelumnya disini)
  2. membuat Header (kepala)
    tambahkan syntak berikut pada file index.html untuk membuat header

    Cara Membuat Header Dan Footer Di Ionic

    Membuat Header

  3. Membaut Footer (kaki)
    berikut syntax untuk membuat footer (kaki) :

    Cara Membuat Header Dan Footer Di Ionic

    Cara Membuat Footer

untuk desain warna-nya pun sudah disediakan framework ionic sendiri, disini saya menggunakan warna biru (bar-positive). berikut beberapa warna yang disediakan oleh ionic framework :

class warna deskripsi sampel
bar-light putih
bar-stable abu-abu terang
bar-positive biru
bar-calm  biru muda
bar-balanced  hijau
bar-energized  kuning
bar-assertive  merah
bar-royal  ungu
bar-dark  hitam

Menambahkan element pada header

salah satu elemen yang sering di jumpai pada heade (bagian kepala) seperti menu, pencarian dan lain-lain. berikut contoh menambahkan elemen pada bagian header :

Cara Membuat Header Dan Footer Di Ionic

menambahkan element pada header

untuk jenis icon yang bisa anda gunakan pada ionic dapat dilihat di ionicons

Menambahkan Sub Header

selain header, sub header juga dapat di tambahkan pada ionic, contohnya :

Cara Membuat Header Dan Footer Di Ionic

membuat sub header

selain pada header, elemen  dapat juga ditambahkan pada bagian footer, contohnya :

Cara Membuat Header Dan Footer Di Ionic

heade dan footer beserta element

untuk syntak lengkapnya seperti berikut :

oke, sekian artikel Cara Membuat Header Dan Footer Di Ionic. kita berjumpa kembali di artikel part selanjutnya.

Incoming search terms:

  • cara membuat header dan footer di html
  • Cara menggunakan header tiles free
  • cara gunakan aplikasi heAder tiles
  • cara memakai headertiles
  • Contoh header tiles
  • membuat desain footer
  • cara membuat header dan footer berwarna php
  • fungsi hearder tiles
  • tutorial membuat button pada header dengan ionic
  • cara membuat header and foter di html




About the author
Muzanni

love mobile development


Discussion
  • No Comment

Write a Comment

Your email address will not be published. Required fields are marked *