Fab İcon Ekleme

 Merhabalar

 Bu hafta oluşturduğumuz bir uygulamaya fab-icon 'u nasıl eklenir ona bakacağız.

 Geçen haftalarda oluşturduğumuz Cafe uygulamamız üzerinden göstermeye çalışalım.Bu uygulamamızda cafe hakkında genel bilgi veren bir sayfamız olsun içinde fotoğrafı , hakkında kısa bilgi  ve sosyal medya hesaplarına ulaşabilmek için bir tane de fab iconumuz olsun .

🔹En başta sayfamızı oluşturarak başlayalım.

     ionic g page puga

sayfa ismimi, tanıtacağım cafe ismi olarak belirledim. Böylece sayfam oluşmuş oldu. puga.page.html uzantılı sayfama gidip içeriğimi hazırlamaya başlıyorum. İçeriğimi ion-content taglarının arasına yazıyorum öncelikle bir resim görünsün altında da bilgiler verilsin istiyorum . Resmi uygulamanın tanıması için   src→assets klasörünün içerisine taşıyorum.

🔹Resmimizi tanımlayalım

    <img src="/src/assets/icecekResimleri/e427d7c9262063a424d0b89f2b36eb1c_1446286155.jpg">

 Resmin ardından cafe ismi ve cafe bilgileri gelecek. Cafe bilgilerini ayrı bir kutucukta görünmesini istiyorum bunun için de ion-card bileşenini kulanacağız.

🔹içerikleri yazalım.

<h3>     PUGA COFFEE </h3>
<ion-card color="dark">
  <ion-card-content >
<p>Eskişehirin adalarında porsuk gölünü gören manzaralı küçük tatlı bir cafe'si. Ortamı kendine hemen alıştıracak rahat ve sıcak.</p>
</ion-card-content>
</ion-card>

arka planı siyah olan bir ion-card tanımlamış olduk.

🔹Fab-icon tanımlayalım

  Fab iconunu <ion-fab> tagleri ile tanımlıyoruz .Bu taglar arasına fab butonunun özelliklerini ve basınca çıkacak olan butonları tanımlıyoruz.
  Fab butonuna basınca çıkacak olan butonlar da ayrıca <ion-fab-list> tagleri arasında tanımlanıyor.Bu genel bilgilendirmeden sonra kodlarımız üzerinden neler yapabileceğimize bakabiliriz.

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropleft"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="start">
        <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
        <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
        <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
        <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
     
      </ion-fab-list>
    </ion-fab>

  kodun ilk satırında fab iconumuzun nerede konumlandırılacağını tanımlamış olduk (sayfanın altında ve sonunda ,fixed ile sayfayı aşağı yukarı da kaydırsanız o sürekli tanımladığınız konumda olacak demek istiyor.)

 ion-fab-button ile fab-icon 'unu tanımlamış oluyoruz.
 ion-fab-list  içerisine fab butonuna bastığımızda çıkacak olan butonlarımızı koyuyoruz. 'side' özelliği ile butonlar fab iconuna göre nerede konumlanacak onu belirtmiş oluyoruz (burada fab iconunun solunda sıralanacaklar) .

Butonların Fab iconunun
    solunda sıralanması için : side="start"
    sağında sıralanması için : side="end"
    aşağısında sıralanması için : side="bottom"
    üstünde sıralanması için : side="top"

Eğer daha değişik şeyler yapmak istiyorum biri sağında biri solunda biri üstünde biri de altında görünsün isterseniz tüm fab butonları için ayrı fab-list'ler oluşturup yönlendirmelerini teker teker ayarlayabilirsiniz. Şu şekilde:

<ion-fab-list side="start">
        <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
      </ion-fab-list>
        <ion-fab-list side="bottom">
        <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
      </ion-fab-list>
      <ion-fab-list side="top">
        <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
      </ion-fab-list>
      <ion-fab-list side="end">
        <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
      </ion-fab-list>
      </ion-fab-list>

Uygulamamızda ben sola doğru açılan fab butonun kullanmayı tercih ettim  tabi siz ne arzu ederseniz kullanabilirsiniz. Uygulamamız şu şekilde olmuş oluyor:

  Bu haftaki içeriğimizde fab icon ile uygulamamızı nasıl geliştiririz konusu üzerineydi .
 Kendinize iyi bakın .
          Hoşçakalın


Yararlandığım kaynaklar:
https://beta.ionicframework.com/docs/api/fab-list/
https://ionicframework.com/docs/api/components/fab/FabList/