Uygulamamızı Geliştirelim -2

   Merhabalar
   Geçen hafta uygulamamızın içecekler sayfasına resimleri nasıl yerleştireceğimize bakmıştık. Ionic uygulamalarında görünüş için en çok kullanılan component'lardan biri olan ion-card ları kullanarak resimlerimizi yerleştirdik. Bu hafta yerleştirdiğimiz içecek resimlerine tıkladığımızda karşımıza çıkacak olan sayfanın tasarımı ile biraz uğraşalım istiyorum.

   Bazı  cafelere gittiğimizde içecek istediğimizde bize 'küçük' , 'orta' ve 'büyük' seçeneklerini sunup bunların arsından bir seçim yapmamızı isterler. Bunun için bizim uygulamamızda da bu seçimi yapması için bir içerik oluşturabiliriz . Bunun için checklist kullanabileceğimizi düşünüyorum.

  Uygulamamızın tasarımına geçecek olursak , yine tasarım için en kullanışlı olan ion-cardları kullanabiliriz diye düşünüyorum. Yeni sayfamızı visual studio code'da oluşturuyoruz.( ionic g page secondPage diyerek adı secondPage olan sayfayı oluşturmuş oldum.). Bir ionic card'ın içine yine başka bir ionic card oluşturabiliyoruz.

<ion-card>
  <ion-card-content>
      <img src="/src/assets/icecekResimleri/coffeeberry.jpg">
  </ion-card-content>
<ion-card>
  <ion-card-content>
   <ion-grid>
     <ion-row>
       <ion-col>
        <img src="/src/assets/icons/coffee.png"><br/>
        small
      </ion-col>
       <ion-col>
        <img src="/src/assets/icons/coffee.png"><br/>
        medium
       </ion-col>
       <ion-col>
         <img src="/src/assets/icons/coffee.png"><br/>
         large
       </ion-col>
     </ion-row>
   </ion-grid>
  </ion-card-content>
</ion-card>
</ion-card>

   Burada ion-card'larımızın içerisine ilk olarak üstte görünmesini istediğimiz fotoğrafı yerleştiriyoruz. Ardından kahve boylarını temsil edecek olan kahve bardağı iconunu yerleştiriyoruz. Burada önemli noktalardan biri kullanmak istediğimiz iconumuzun assets klasörünün içinde bulunması ve diğer konu ise daha düzenli bir görünüm için grid kullanımı.
    IONIC'TE GRİD KULLANIMI
   Ionic'teki grid kullanımı htmldeki kullanım ile çok benzerlik gösteriyor. En basit tanım olarak yine bir row tagı kullanarak içerisine col- taglarını dolduruyoruz.
  Grid tüm satır ve sütunlar için bir container görevini alır .Gösterilmek istenen içerik sütunların içerisine yazılır ve sütunlar satırlardan hemen sonra gelen satırların child'ıdır. Yani row tagları ile col taglarının arasına herhangi bir tag girmez ise sağllıklı bir grid görünümü oluşur.

  col-sm: genişliği 4 eşit parçaya böler.
  col-4:  12 eşit parçaya bölünmüş bir satırın 4'lük kadar genişliğini kapsar.

kendi kodumuzda kullandığımız ion-col (col) bir satırın içerisine kaç tane koyarsak , o satırı yerleştirdiğimiz col sayısı kadar eşit parçaya böler.

İsim	Değer	Tanım
xs	auto	xs ekranlardaki grid genişliği otomatik ayarlanmıştır,değiştirilemez
sm	540px	Minimum genişlik 576px olduğunda grid genişliğini 540 px yapar
md	720 px	Minimum genişlik 768 px olan ekranlarda grid genişliğini 720 px yapar.
lg	960 px	Minimum genişlik 992 px olan ekranlardaki grid genişliğini 960 px olarak ayarlar.
xl	1140 px	Minimum genişlik 1200 px olan ekranlarda grid genişliğini 1140 px olarak ayarlar.

    Uygulamamıza geri dönecek olursak içeceklerimizin boyutlarını temsil edecek resimleri yerleştirdikten sonra fiyatlarını da belirleyip istedikleri boyu seçme imkanı sağlamak . Seçim için checkbox kullanabiliriz ya da ratio button da kullanılabilir. Bu uygulamamızda checkbox ı  kullanarak tasarımımıza nasıl entegre edildiğini bir görelim.

     Yeniden bir ion-card oluşturuyoruz. İçerisine item'larımızı sırasıyla yerleştiriyoruz.

 <ion-item>
   <ion-label> Small</ion-label>
   <ion-label>11TL</ion-label>
   <ion-checkbox color="#558000" item-end></ion-checkbox>
  </ion-item>
  
  <ion-item>
    <ion-label> Medium</ion-label>
    <ion-label>13TL</ion-label>
    <ion-checkbox color="#558000" item-end></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Large</ion-label>
    <ion-label>15 TL</ion-label>
    <ion-checkbox color="#558000" item-end></ion-checkbox>
  </ion-item>

 

Uygulamamızda checkbox kullanmak istiyorsak ion-checkbox tagını kullanarak bunu sağlamış oluyoruz. Burada color"#558000" ile  checkbox'ımız işaretlendiğinde alacağı rengi temsil ediyor. Ama bunu böyle uygulamaya çalıştığımızda borderları siyah içi beyaz olan bir chekbox kutucuğu karşımıza çıkıyor.Bu Ionic 3 te bu şekilde yazılsa bile bizim uygulamız İonic 4 ile yazıldığı için bazı componentlerin entegrasyonunda sorunlar olabiliyor. Renkli olarak kullanmak istersek color özelliğinin içerisine "primary , secondary , danger , light , dark" seçeneklerinden herhangi birini seçip kullanabiliyoruz. *Color  özelliğine bu seçenekleri yazarken büyük harfle başlamadığından emin olmayı da unutmamalıyız*.Tagın içerisindeki  ' item-end ' özelliği  checkbox'ımızı satırın sonunda görünmesini sağlıyor. Ayrıca bir seçeneği işaretli olarak göstermek istiyorsak 'checked' özelliğini tagımızın içerisine koyduğumuzda bunu sağlamış oluyoruz.

     Uygulamamıza buton eklemek istediğimizde  ionic 3 te

 <button ion-button color="Secondary" round >Add</button>

  şeklinde yazabiliyorken bu  Ionic 4 'te desteklenmiyor. Buton oluşuyor ama şekil renk gibi verdiğimiz css özelliklerini desteklemiyor.Bunun için Ionic 4 'te yazımı şu şekilde olması gerekiyor.

<ion-button shape="round" color="secondary" fill="outline">Add</ion-button>

Buradaki temel fark tag'ların başlangıçları . Biz 'ion-button' ile başlayanı kullanmalıyız.

Uygulamamızın son hali şu şekilde oluyor.

       Gelecek Hafta görüşmek üzere.

Yararlandığım Kaynaklar:
https://beta.ionicframework.com/docs/components/#checkbox
https://ionicframework.com/docs/api/components/grid/Grid/