Ant Design ile ReactJS Uygulaması için Tema Oluşturma — Devam
Bir önceki yazımda Layout tasarımı için gerekli alt yapıyı oluşturmuştuk. Bu yazımda ise Layout Tasarımı ile devam edeceğiz.
Layout Tasarımı
İlk olarak src klasörü altında components adında bir klasör oluşturalım. Layoutumuza ait componentleri bu klasör altında sayfadaki konumlarına göre adlandıracağız. (Örnek: Header, Sider, Footer vs…)
Ayrıca kendi oluşturduğumuz component adlarına ön ek olarak Medium ekleyeceğim (MediumLayout, MediumSider …gibi). Bunun nedeni antd’da da bu component isimleri ile componentler bulunduğundan bizim component adlarımıza bu şekilde ön ekleyerek oluşacak hatanın önüne geçmek.
Oluşturacağımız Layout’ un yapısı yukarıdaki gibi olacaktır. Fakat eğer siz farklı bir tasarım isterseniz ant design’ ın sitesini inceleyerek yapmak istediğiniz tasarımı ufak değişikliklerle oluşturabilirsiniz.
İlk olarak src/components altında Layout adında bir klasör oluşturalım ve Layout klasörü altında da bir index.js dosyası oluşturalım. index.js dosyamızın içeriği şimdilik aşağıdaki gibi olacaktır.
Uygulamayı çalıştırdığımızda Layoutumuzu görebilmek için src/App.js dosyasının içeriğini de aşağıdaki gibi düzenliyoruz.
Şimdi ise Sider ve Header Componentlerimizin yapımına geçelim. İlk olarak Sider componentimizi yapacağız. Bunun için src/components altında Sider adında bir klasör ve onun da altında index.js adında bir dosya oluşturuyoruz. Dosyamızın içeriği aşağıdaki gibi olacaktır.
Sider’ ımıza ait logo bölümü için ant’ ın sitesinden bulduğum basit bir stil var. Bu kodu src/components/Sider klasörü altında bir index.less dosyası oluşturduktan sonra bu dosyaya aşağıdaki gibi ekliyorum ve daha sonra bu index.less dosyasını Sider klasörü altındaki index.js dosyasına,
import ‘./index.less’;şeklinde import ediyorum. index.less dosyasının içeriği aşağıdaki gibi olacaktır.
Bu işlemlerden sonra sayfayı yenilediğinizde sayfanın görüntüsü aşağıdaki gibi olacaktır.
Sider Kısmını bitirdikten sonra Header kısmının yapımına geçiyoruz.
Header için de yine önceki componentlerimizde yaptığımız gibi src/components altında Header adında bir klasör ve bu klasörün altında da index.js ve index.less dosyalarını oluşturuyoruz. src/components/Header/index.js dosyasının içeriği aşağıdaki gibi olmalıdır.
Header componentinde görüldüğü üzere Header’ da bir inline stil ve Iconda da trigger isminde bir class var. Bu trigger class’ ına ait stilleri de yine index.js ile aynı düzeyde bulunan index.less dosyasına ekliyorum ve index.less dosyasını index.js dosyasına,
import ‘./index.less’;şeklinde import ediyorum. Index.less dosyasının içeriği de aşağıdaki gibi olmalıdır.
Bu işlemden sonra da yaptığımız işlemi sayfada görebilmek adına MediumHeader adındaki componentimizi MediumLayout componentine dahil ediyoruz. Bu işlemden sonra src/components/Layout altındaki index.js dosyamızın içeriği aşağıdaki gibi olacaktır.
Şimdi ise Content ve Footer kısımlarının kodlarının yazımına geldi.
Content ve Footer kısımlarının kodlarını src/components/Layout klasörü altındaki index.js dosyasının içine direkt olarak yazacağım. Bu işlemden sonra index.js dosyasının içeriği aşağıdaki gibi olacaktır.
Sayfayı yenilediğimizde ise sayfamıza ait görüntü aşağıdaki görseldeki gibi olacaktır.
Layouta son dokunuşların yapılması
- Layoutun boydan sayfayı tamamen kaplamadığını farketmişsinizdir. Layoutun sayfanın tamamını kaplamasını sağlamak için Layout container’ ına (En üst seviyedeki Layout componentine)
<Layout style={{ minHeight: "100vh" }}>Şeklinde inline stil ekliyoruz. Bu işlemden sonra Layoutumuz sayfayı kapladı fakat, bu seferde Content componenti içinde içerik bulunmadığı için Content componenti kısa kaldı. Bunu da çözmek için Content componentindeki inline stilde “minHeight” propertysinin değerini de “80vh” şeklinde güncelleyince bu sorun da ortadan kalkmış olacaktır.
Sayfayı yenilediğimizde sayfamızın son hali aşağıdaki görseldeki gibi olacaktır.
2) Layoutumuzdaki ilk problemini çözdükten sonra sıra Header’ da bulunan “menu-unfold” tipindeki ikona tıklanınca Sider Menüyü açıp kapatma özelliğini kazandırmaya geldi.
Bu özelliğin eklenebilmesi için useState hookunu kullanarak src/components/Layout klasörü altındaki index.js dosyasında bir state objesi oluşturacağım.
Sonra index.js dosyasında “menu-unfold” tipindeki ikona tıklanınca (onClick) state’ in durumunda değişiklik meydana getirecek toggle adında bir method ekleyeceğim.
Bu işlemlerden sonra oluşturduğum “collapsed” adındaki state objesini ve toggle metodunu MediumHeader adındaki componente props olarak geçeceğim. Ek olarak “collapsed” adındaki state objesini MediumSider adındaki componente’ de props olarak geçmek gerekiyor.
MediumHeader componentinde collapsed objesini Antd’ a ait icon componentinin tipini belirlemek için, toggle metodunu ise Icon componentinin onClick event’ ında kullanacağım. MediumSider componentine de gönderilen collapsed state objesini ise Sider menünün kapanıp açılmasını sağlayan property’sine atayacağız.
Bu işlemlerden sonra MediumLayout, MediumSider ve MediumHeader componentlerimize ait kodlar sırasıyla aşağıdaki gibi olacaktır.
Layouta birçok ekleme ve iyileştirme yapılabilir, fakat yazının daha fazla uzamaması adına yazımı burada noktalıyorum 😊.
Yazı ile ilgili eksikleri ya da karşılaştığınız problemleri yorum olarak yazarsanız düzeltmek / yardımcı olmak için elimden geleni yaparım. Bir sonraki yazımda görüşmek üzere.
