VueJS’te kullanıcı tarafından yönetilebilir layout yapmak ve CSS Grid konsepti

Web uygulamaların layoutları genellikle başta bir kere hazırlanır ve kullanıcının inisiyatifine bırakılmaz. Ama bazı projelerde sidebar’ın nerede duracağına, footer’ın ne kadar alan kaplayacağına ve buna benzer layout ayarlarına kullanıcının karar vermesi ihtiyaç olur.

Canlı demo linki

CSS’in gömülü grid konseptini kullanarak çok kolay bir şekilde bu ihtiyaç karşılanabilir.

Frontend dünyasında yıllardır layout kurmak için CSS’in flex sistemi kullanılıyor. Çünkü layout yönetimi için oluşturulmuş grid konsepti yakın geleceğe kadar tüm tarayıcılar tarafından desteklenmiyordu. Hala birçok frontend veya mobil framework/library CSS’in grid konseptini bünyelerine dahil etmediler.

Söz gelimi, React Native projelerinde kullanıldığını hiç görmedim, oysa layout yönetimini o kadar kolaylaştırır ki.

CSS’in grid konseptindeki “template areas” property’sini tanıyalım

HTML
<div class="layout">
  <header>Header</header>
  <aside>Aside</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>

Böyle bir layout’u “template areas” property’si ile yönetelim.

CSS
header {grid-area: myHeader}
aside {grid-area: myAside}
main {grid-area: myMain}
footer {grid-area: myFooter}

Bu tanımlamanın ardından adeta çizim yapar gibi layoutu hazırlayabiliriz.

CSS
.layout {
  display: grid;
  grid-template-areas: 
  "myHeader myHeader myHeader"
  "myAside myMain myMain"
  "myAside myFooter myFooter";
}

İşte bu kadar kolay. Yaklaşık 10 satır kodla, yazının başında görülen layoutu elde ettik. Grid template areas property’si, şaşırtıcı derecede kolay yönetiliyor.

myAside adlı layout parçamızın sağda olmasını istiyoruz diyelim,

CSS
.layout {
  display: grid;
  grid-template-areas: 
  "myHeader myHeader myHeader"
  "myMain myMain myAside"
  "myFooter myFooter myAside";
}

Mobile’deki layoutu yönetmek de çok kolay

CSS
@media query
.layout {
  display: grid;
  grid-template-areas: 
  "myHeader"
  "myMain"
  "myFooter";
}

Peki bunu nasıl kullanıcının yönetebileceği hale getiririz

VueJS’in style binding yöntemini kullanarak grid template areas property’sini dinamik hale getiririz.

HTML
<div class="layout" :style="[state.customLayout]">
  <header>Header</header>
  <aside>Aside</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>

Artık bir butona tıklandığında state’teki customLayout bilgisine grid template areas property’sini value ile birlikte set ederek, dinamik bir şekilde kullanıcının yönetmesini sağlayabiliriz.

Kullanıcının seçimleri sonucu değişen customLayout bilgisini localStorage’de tutarak kullanıcının sonraki oturumda bıraktığı gibi bulmasını sağlayabilirsiniz.

Canlı demo linki

GitHub Reposu