{"id":32386,"date":"2025-10-21T05:01:37","date_gmt":"2025-10-21T02:01:37","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/"},"modified":"2025-10-21T05:01:37","modified_gmt":"2025-10-21T02:01:37","slug":"web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/","title":{"rendered":"Web Geli\u015ftirmede Overlay ve Drawer Bile\u015fenlerinin \u00d6nemi Nedir?"},"content":{"rendered":"<p><span>Slaydover: Vue ve Nuxt \u0130\u00e7in Duyarl\u0131 Overlay &#038; Drawer Bile\u015feni<\/span><\/p>\n<p>Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve etkile\u015fimi art\u0131ran dinamik aray\u00fcz elemanlar\u0131 vazge\u00e7ilmezdir. \u00d6zellikle mobil cihazlarda ve farkl\u0131 ekran boyutlar\u0131nda sorunsuz \u00e7al\u0131\u015fan, esnek ve duyarl\u0131 overlay (bindirme) ile drawer (\u00e7ekmece) bile\u015fenleri olu\u015fturmak, geli\u015ftiriciler i\u00e7in zaman zaman karma\u015f\u0131k bir s\u00fcre\u00e7 haline gelebilir. Peki, Vue veya Nuxt tabanl\u0131 projelerinizde bu zorluklar\u0131n \u00fcstesinden gelmek ve h\u0131zl\u0131ca harika kullan\u0131c\u0131 aray\u00fczleri in\u015fa etmek m\u00fcmk\u00fcn m\u00fc? \u0130\u015fte tam bu noktada, Slaydover devreye girerek hem performans\u0131 hem de geli\u015ftirici deneyimini bir \u00fcst seviyeye ta\u015f\u0131yor. Bu makalede, Slaydover&#8217;\u0131n ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve projelerinizde nas\u0131l etkin bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, duyarl\u0131 ve kullan\u0131c\u0131 dostu aray\u00fczlerin kap\u0131lar\u0131n\u0131 birlikte aralayal\u0131m.<\/p>\n<p>G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131nda kullan\u0131c\u0131 etkile\u015fimi ve aray\u00fcz (UI) tasar\u0131m\u0131, kullan\u0131c\u0131 deneyiminin (UX) merkezinde yer al\u0131r. \u00d6zellikle tek sayfal\u0131k uygulamalar\u0131n (SPA) yayg\u0131nla\u015fmas\u0131yla birlikte, sayfa yenilemeleri olmadan bilgi sunma veya ek fonksiyonellik sa\u011flama ihtiyac\u0131 artm\u0131\u015ft\u0131r. Bu noktada, overlay ve drawer bile\u015fenleri kritik bir rol \u00fcstlenir. Overlay&#8217;ler, genellikle sayfan\u0131n \u00fczerinde a\u00e7\u0131lan, ana i\u00e7eri\u011fi ge\u00e7ici olarak gizleyen pencerelerdir. Bunlara modal, lightbox veya diyalog kutusu da diyebiliriz. Kullan\u0131c\u0131dan bir onay almak, bir form doldurmas\u0131n\u0131 istemek, detayl\u0131 bilgi g\u00f6stermek veya bir resim galerisi sunmak gibi pek \u00e7ok senaryoda kullan\u0131l\u0131rlar. \u00d6te yandan drawer&#8217;lar, genellikle ekran\u0131n yan\u0131ndan veya \u00fcst\u00fcnden kayarak a\u00e7\u0131lan, navigasyon men\u00fcleri, filtreleme se\u00e7enekleri, sepet detaylar\u0131 veya profil ayarlar\u0131 gibi yard\u0131mc\u0131 i\u00e7erikleri bar\u0131nd\u0131ran \u00e7ekmecelerdir. \u00d6zellikle mobil cihazlarda ekran alan\u0131n\u0131n k\u0131s\u0131tl\u0131 olmas\u0131 nedeniyle hamburger men\u00fcler arac\u0131l\u0131\u011f\u0131yla ana navigasyonu gizlemek i\u00e7in s\u0131k\u00e7a tercih edilirler. Bu bile\u015fenlerin ortak \u00f6zelli\u011fi, kullan\u0131c\u0131n\u0131n ana ak\u0131\u015ftan kopmadan ek bilgilere veya fonksiyonlara eri\u015fimini sa\u011flamalar\u0131d\u0131r. Ancak bu kadar \u00f6nemli olmalar\u0131na ra\u011fmen, duyarl\u0131, eri\u015filebilir ve performansl\u0131 bir overlay veya drawer bile\u015feni geli\u015ftirmek, CSS, JavaScript ve eri\u015filebilirlik (ARIA) standartlar\u0131n\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 nedeniyle zorlu olabilir. Manuel olarak kod yazmak, farkl\u0131 ekran boyutlar\u0131na uyum sa\u011flamak, klavye navigasyonunu ve ekran okuyucular\u0131n\u0131 desteklemek gibi pek \u00e7ok detay\u0131 d\u00fc\u015f\u00fcnmeyi gerektirir. \u0130\u015fte bu y\u00fczden Slaydover gibi haz\u0131r ve optimize edilmi\u015f \u00e7\u00f6z\u00fcmler, geli\u015ftiricilerin omuzlar\u0131ndaki y\u00fck\u00fc hafifletir ve onlara daha \u00e7ok ana i\u015f mant\u0131\u011f\u0131na odaklanma f\u0131rsat\u0131 sunar. Ayr\u0131ca, bu bile\u015fenlerin tutarl\u0131 bir kullan\u0131c\u0131 deneyimi sunmas\u0131, uygulaman\u0131z\u0131n profesyonelli\u011fini ve kullan\u0131labilirli\u011fini do\u011frudan etkiler. Bu nedenle, projelerinizde bu t\u00fcr etkile\u015fimli elemanlar\u0131 do\u011fru ve verimli bir \u015fekilde kullanmak, kullan\u0131c\u0131 memnuniyetini art\u0131rman\u0131n anahtar\u0131d\u0131r.<\/p>\n<p>Slaydover gibi kapsaml\u0131 bir bile\u015fen, bu karma\u015f\u0131kl\u0131\u011f\u0131 soyutlayarak geli\u015ftiricilere basit bir API sunar. Bu sayede, responsive (duyarl\u0131) tasar\u0131m prensiplerine uygun, farkl\u0131 cihazlarda ve taray\u0131c\u0131larda tutarl\u0131 \u00e7al\u0131\u015fan bir kullan\u0131c\u0131 aray\u00fcz\u00fc olu\u015fturmak \u00e7ok daha kolay hale gelir. Geli\u015ftiricilerin sadece i\u00e7eri\u011fi ve temel davran\u0131\u015flar\u0131 tan\u0131mlamas\u0131 yeterlidir; Slaydover, geriye kalan t\u00fcm g\u00f6rsel ve i\u015flevsel detaylar\u0131 otomatik olarak halleder. Bu, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131n geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve bak\u0131m maliyetlerini d\u00fc\u015f\u00fcr\u00fcr. Ayr\u0131ca, Slaydover&#8217;\u0131n sundu\u011fu \u00f6zelle\u015ftirme se\u00e7enekleri sayesinde, projenizin marka kimli\u011fine ve tasar\u0131m sistemine uygun bile\u015fenler olu\u015fturmak da m\u00fcmk\u00fcnd\u00fcr. Renklerden animasyonlara, boyutlardan konumland\u0131rmaya kadar pek \u00e7ok parametre \u00fczerinde tam kontrol sa\u011flayarak, uygulaman\u0131z\u0131n g\u00f6rsel b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc koruyabilirsiniz. K\u0131sacas\u0131, overlay ve drawer bile\u015fenleri, modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez yap\u0131 ta\u015flar\u0131d\u0131r ve Slaydover gibi g\u00fc\u00e7l\u00fc bir ara\u00e7la, bu yap\u0131 ta\u015flar\u0131n\u0131 in\u015fa etmek hi\u00e7 olmad\u0131\u011f\u0131 kadar eri\u015filebilir ve verimli hale gelir. Kullan\u0131c\u0131lar, h\u0131zl\u0131 ve ak\u0131c\u0131 bir deneyim beklerken, geli\u015ftiriciler de bu beklentiyi kar\u015f\u0131lamak i\u00e7in sa\u011flam ve g\u00fcvenilir ara\u00e7lara ihtiya\u00e7 duyarlar. Slaydover, i\u015fte tam da bu ihtiyac\u0131 kar\u015f\u0131lamak \u00fczere tasarlanm\u0131\u015ft\u0131r, b\u00f6ylece hem geli\u015ftiriciler hem de son kullan\u0131c\u0131lar kazan\u0131r.<\/p>\n<h2>Slaydover&#8217;a Ba\u015flang\u0131\u00e7: Vue ve Nuxt Projelerinize Nas\u0131l Entegre Edersiniz?<\/h2>\n<p>Slaydover&#8217;\u0131 Vue veya Nuxt projenize entegre etmek olduk\u00e7a basit ve sezgisel bir s\u00fcre\u00e7tir. \u0130lk olarak, projenizin k\u00f6k dizininde bir terminal a\u00e7arak Slaydover paketini kurman\u0131z gerekmektedir. Bu i\u015flem i\u00e7in tercih etti\u011finiz paket y\u00f6neticisini kullanabilirsiniz. Genellikle <code>npm<\/code> veya <code>yarn<\/code> tercih edilir. A\u015fa\u011f\u0131daki komutlardan birini \u00e7al\u0131\u015ft\u0131rarak kurulumu tamamlayabilirsiniz:<\/p>\n<pre><code class=\"language-bash\">npm install slaydover<\/pre>\n<p><\/code><\/p>\n<p>veya<\/p>\n<pre><code class=\"language-bash\">yarn add slaydover<\/pre>\n<p><\/code><\/p>\n<p>Kurulum tamamland\u0131ktan sonra, Slaydover'\u0131 Vue uygulaman\u0131zda kullan\u0131ma haz\u0131r hale getirmeniz gerekir. Bu genellikle global olarak veya ihtiyac\u0131n\u0131z olan her bile\u015fende ayr\u0131 ayr\u0131 import ederek yap\u0131l\u0131r. Nuxt.js projeleri i\u00e7in ise, Slaydover'\u0131 bir eklenti (plugin) olarak kaydetmek en iyi yakla\u015f\u0131md\u0131r. Bu, bile\u015fenin uygulaman\u0131z\u0131n her yerinde eri\u015filebilir olmas\u0131n\u0131 sa\u011flar ve kod tekrar\u0131n\u0131 \u00f6nler.<\/p>\n<h3>Vue.js Projelerinde Slaydover Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\n<p>E\u011fer standart bir Vue.js projesi kullan\u0131yorsan\u0131z, Slaydover'\u0131 <code>main.js<\/code> veya <code>main.ts<\/code> dosyan\u0131zda global olarak kaydedebilirsiniz. Bu, Slaydover bile\u015fenini t\u00fcm Vue bile\u015fenlerinizde <code><Slaydover><\/code> etiketiyle kullanman\u0131za olanak tan\u0131r:<\/p>\n<pre><code class=\"language-javascript\">\/\/ main.js veya main.ts\nimport { createApp } from 'vue';\nimport App from '.\/App.vue';\nimport Slaydover from 'slaydover'; \/\/ Slaydover'\u0131 import edin\nimport 'slaydover\/dist\/style.css'; \/\/ Stil dosyas\u0131n\u0131 import edin\n\nconst app = createApp(App);\n\napp.component('Slaydover', Slaydover); \/\/ Global olarak kaydetme\napp.mount('#app');<\/pre>\n<p><\/code><\/p>\n<p>Daha sonra, herhangi bir Vue bile\u015feninizde Slaydover'\u0131 a\u015fa\u011f\u0131daki gibi kullanabilirsiniz. Basit bir a\u00e7\u0131l\u0131r kapan\u0131r \u00e7ekmece (drawer) \u00f6rne\u011fi:<\/p>\n<pre><code class=\"language-vue\"><template>\n  <div>\n    <button @click=\"isDrawerOpen = true\">Men\u00fcy\u00fc A\u00e7<\/button>\n\n    <Slaydover v-model:is-open=\"isDrawerOpen\" position=\"left\" size=\"300px\">\n      <div class=\"drawer-content\">\n        <h3>Navigasyon Men\u00fcs\u00fc<\/h3>\n        <ul>\n          <li>Anasayfa<\/li>\n          <li>Hakk\u0131m\u0131zda<\/li>\n          <li>Hizmetler<\/li>\n          <li>\u0130leti\u015fim<\/li>\n        <\/ul>\n        <button @click=\"isDrawerOpen = false\">Kapat<\/button>\n      <\/div>\n    <\/Slaydover>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst isDrawerOpen = ref(false);\n<\/script>\n\n<style scoped>\n.drawer-content {\n  padding: 20px;\n  background-color: #fff;\n  height: 100%; \/* \u00c7ekmecenin t\u00fcm y\u00fcksekli\u011fini kaplamas\u0131n\u0131 sa\u011flar *\/\n}\nul {\n  list-style: none;\n  padding: 0;\n}\nli {\n  padding: 10px 0;\n  border-bottom: 1px solid #eee;\n}\n<\/style><\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte, <code>v-model:is-open<\/code> prop'u ile \u00e7ekmecenin a\u00e7\u0131k veya kapal\u0131 olma durumunu y\u00f6netiyoruz. <code>position=\"left\"<\/code> ile \u00e7ekmecenin sol taraftan a\u00e7\u0131laca\u011f\u0131n\u0131 ve <code>size=\"300px\"<\/code> ile geni\u015fli\u011fini belirliyoruz. Bu prop'lar sayesinde Slaydover'\u0131n temel davran\u0131\u015flar\u0131n\u0131 kolayca kontrol edebilirsiniz.<\/p>\n<h3>Nuxt.js Projelerinde Slaydover Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\n<p>Nuxt.js, Vue uygulamalar\u0131n\u0131 geli\u015ftirirken harika bir \u00e7er\u00e7evedir ve eklentiler (plugins) arac\u0131l\u0131\u011f\u0131yla global bile\u015fenleri veya i\u015flevleri entegre etme kolayl\u0131\u011f\u0131 sunar. Slaydover'\u0131 Nuxt projenize dahil etmek i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyebilirsiniz:<\/p>\n<ol>\n<li><strong>Bir Nuxt Eklentisi Olu\u015fturun:<\/strong> <code>plugins<\/code> klas\u00f6r\u00fcn\u00fczde yeni bir dosya olu\u015fturun, \u00f6rne\u011fin <code>slaydover.client.js<\/code> veya <code>slaydover.js<\/code>. <code>.client<\/code> uzant\u0131s\u0131, bu eklentinin yaln\u0131zca istemci taraf\u0131nda (taray\u0131c\u0131da) \u00e7al\u0131\u015faca\u011f\u0131n\u0131 belirtir ki bu Slaydover gibi UI bile\u015fenleri i\u00e7in idealdir.<\/li>\n<pre><code class=\"language-javascript\">\/\/ plugins\/slaydover.client.js\nimport { defineNuxtPlugin } from '#app';\nimport Slaydover from 'slaydover';\nimport 'slaydover\/dist\/style.css';\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.component('Slaydover', Slaydover);\n});<\/pre>\n<p><\/code><\/p>\n<li><strong>Nuxt Yap\u0131land\u0131rmas\u0131nda Eklentiyi Kaydedin:<\/strong> <code>nuxt.config.js<\/code> veya <code>nuxt.config.ts<\/code> dosyan\u0131zda, <code>plugins<\/code> dizisine yeni olu\u015fturdu\u011funuz eklentinin yolunu ekleyin:<\/li>\n<pre><code class=\"language-javascript\">\/\/ nuxt.config.js\nexport default defineNuxtConfig({\n  plugins: [\n    '~\/plugins\/slaydover.client.js' \/\/ Eklentiyi buraya ekleyin\n  ],\n  \/\/ Di\u011fer Nuxt yap\u0131land\u0131rmalar\u0131n\u0131z...\n});<\/pre>\n<p><\/code>\n<\/ol>\n<p>Bu ad\u0131mlardan sonra, Nuxt projenizin herhangi bir <code>.vue<\/code> bile\u015feninde <code><Slaydover><\/code> etiketini do\u011frudan kullanabilirsiniz, import etmenize gerek kalmaz. Bu, \u00f6zellikle b\u00fcy\u00fck Nuxt projelerinde bile\u015fen y\u00f6netimini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde basitle\u015ftirir ve temiz bir kod yap\u0131s\u0131 sa\u011flar. Ayr\u0131ca Nuxt'\u0131n otomatik a\u011fa\u00e7 sallama (tree-shaking) ve kod b\u00f6lme (code-splitting) yetenekleri sayesinde, Slaydover yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda y\u00fcklenerek uygulaman\u0131z\u0131n genel performans\u0131na olumlu katk\u0131 sa\u011flar. Bu entegrasyon y\u00f6ntemi, uygulaman\u0131z\u0131n genel mimarisiyle uyumlu, bak\u0131m\u0131 kolay ve \u00f6l\u00e7eklenebilir bir \u00e7\u00f6z\u00fcm sunar. Art\u0131k duyarl\u0131 overlay ve drawer'lar\u0131 Vue ve Nuxt projelerinizde zahmetsizce kullanmaya ba\u015flayabilirsiniz.<\/p>\n<div class=\"expert-tip\">\n  Uzman \u0130pucu: Nuxt 3 kullan\u0131yorsan\u0131z ve otomatik import kullan\u0131yorsan\u0131z, <code>components\/Slaydover.vue<\/code> gibi bir wrapper bile\u015fen olu\u015fturup i\u00e7inde Slaydover'\u0131 import ederek daha da basit bir kullan\u0131m sa\u011flayabilirsiniz. Bu, eklenti kayd\u0131na gerek kalmadan Slaydover'\u0131n Nuxt'\u0131n otomatik bile\u015fen alg\u0131lama sistemine dahil olmas\u0131n\u0131 sa\u011flar. Ancak, Slaydover'\u0131n stil dosyas\u0131n\u0131 yine global olarak (\u00f6rne\u011fin <code>nuxt.config.js<\/code> i\u00e7indeki <code>css<\/code> array'inde) eklemeyi unutmay\u0131n.\n<\/div>\n<h2>Slaydover'\u0131n Duyarl\u0131 Tasar\u0131m Yetenekleri Nelerdir ve Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n<p>Modern web geli\u015ftirmenin olmazsa olmaz\u0131 duyarl\u0131 tasar\u0131m, uygulaman\u0131z\u0131n farkl\u0131 cihazlarda ve ekran boyutlar\u0131nda sorunsuz bir \u015fekilde g\u00f6r\u00fcnt\u00fclenmesini ve \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Slaydover, bu ihtiyac\u0131 \u00e7ekirdekten ele alarak, duyarl\u0131 overlay ve drawer bile\u015fenleri olu\u015fturmay\u0131 son derece kolayla\u015ft\u0131r\u0131r. Bile\u015fen, tasar\u0131m prensipleri gere\u011fi mobil \u00f6ncelikli yakla\u015f\u0131mla geli\u015ftirilmi\u015ftir ve bu sayede k\u00fc\u00e7\u00fck ekranlardan b\u00fcy\u00fck masa\u00fcst\u00fc monit\u00f6rlerine kadar her ortamda kusursuz bir deneyim sunar.<\/p>\n<p>Slaydover'\u0131n duyarl\u0131l\u0131k \u00f6zellikleri genellikle <code>position<\/code> ve <code>size<\/code> prop'lar\u0131n\u0131n ak\u0131ll\u0131ca kullan\u0131m\u0131 ve CSS taraf\u0131ndaki esneklik ile birle\u015ferek ortaya \u00e7\u0131kar. \u00d6rne\u011fin, bir navigasyon men\u00fcs\u00fc i\u00e7in sol taraftan a\u00e7\u0131lan bir drawer bile\u015feni, mobil cihazlarda ekran\u0131n neredeyse tamam\u0131n\u0131 kaplarken, masa\u00fcst\u00fc g\u00f6r\u00fcn\u00fcm\u00fcnde daha dar bir alana s\u0131k\u0131\u015fm\u0131\u015f veya tamamen gizlenmi\u015f olabilir. Slaydover, bu ge\u00e7i\u015fleri y\u00f6netirken ak\u0131\u015fkan ve performansl\u0131 animasyonlar sunar.<\/p>\n<h3>Farkl\u0131 Ekran Boyutlar\u0131 \u0130\u00e7in Slaydover Nas\u0131l Ayarlan\u0131r?<\/h3>\n<p>Slaydover, kendili\u011finden duyarl\u0131 bir yap\u0131ya sahip olsa da, projenizin \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re daha da optimize edilebilir. Temel olarak, <code>position<\/code> (left, right, top, bottom) ve <code>size<\/code> (geni\u015flik veya y\u00fckseklik de\u011feri) prop'lar\u0131n\u0131 kullanarak bile\u015fenin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve davran\u0131\u015f\u0131n\u0131 \u015fekillendirirsiniz. Ancak ger\u00e7ek duyarl\u0131l\u0131\u011f\u0131, bu prop'lar\u0131 medya sorgular\u0131 (media queries) ile birle\u015ftirdi\u011finizde elde edersiniz.<\/p>\n<pre><code class=\"language-vue\"><template>\n  <div>\n    <button @click=\"isNavOpen = true\">Men\u00fc<\/button>\n\n    <Slaydover\n      v-model:is-open=\"isNavOpen\"\n      :position=\"drawerPosition\"\n      :size=\"drawerSize\"\n      :close-on-click-outside=\"true\"\n      class=\"custom-slaydover\"\n    >\n      <div class=\"nav-content\">\n        <h3>Uygulama Navigasyonu<\/h3>\n        <ul>\n          <li>Ana Sayfa<\/li>\n          <li>\u00dcr\u00fcnler<\/li>\n          <li>Blog<\/li>\n          <li>Profil<\/li>\n        <\/ul>\n        <button @click=\"isNavOpen = false\">Kapat<\/button>\n      <\/div>\n    <\/Slaydover>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted } from 'vue';\n\nconst isNavOpen = ref(false);\nconst screenWidth = ref(window.innerWidth);\n\nconst updateScreenWidth = () => {\n  screenWidth.value = window.innerWidth;\n};\n\nonMounted(() => {\n  window.addEventListener('resize', updateScreenWidth);\n});\n\nonUnmounted(() => {\n  window.removeEventListener('resize', updateScreenWidth);\n});\n\nconst drawerPosition = computed(() => {\n  return screenWidth.value < 768 ? 'left' : 'right'; \/\/ K\u00fc\u00e7\u00fck ekranlarda soldan, b\u00fcy\u00fck ekranlarda sa\u011fdan a\u00e7\n});\n\nconst drawerSize = computed(() => {\n  return screenWidth.value < 768 ? '90vw' : '350px'; \/\/ K\u00fc\u00e7\u00fck ekranlarda %90 geni\u015flik, b\u00fcy\u00fcklerde 350px\n});\n<\/script<\n\n<style scoped>\n.nav-content {\n  padding: 20px;\n  background-color: #f8f8f8;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.nav-content ul {\n  list-style: none;\n  padding: 0;\n  flex-grow: 1; \/* \u0130\u00e7eri\u011fin esnek bir \u015fekilde yay\u0131lmas\u0131n\u0131 sa\u011flar *\/\n}\n.nav-content li {\n  padding: 12px 0;\n  border-bottom: 1px solid #eee;\n  font-size: 1.1em;\n  color: #333;\n}\n.nav-content h3 {\n  color: #007bff;\n  margin-bottom: 20px;\n}\nbutton {\n  padding: 10px 15px;\n  background-color: #007bff;\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  margin-top: 20px;\n  align-self: flex-start; \/* Butonun sola hizalanmas\u0131n\u0131 sa\u011flar *\/\n}\nbutton:hover {\n  background-color: #0056b3;\n}\n\n\/* Slaydover'\u0131n kendisi i\u00e7in mobil uyumlu CSS \u00f6rnekleri *\/\n\/* Bu \u00f6rneklerde, Slaydover'\u0131n sa\u011flad\u0131\u011f\u0131 s\u0131n\u0131flar\u0131 veya kendi wrapper'\u0131n\u0131z\u0131 hedefleyebilirsiniz *\/\n.custom-slaydover :deep(.slaydover-container) {\n  \/* Varsay\u0131lan stil, \u00f6rne\u011fin mobil g\u00f6r\u00fcn\u00fcm *\/\n  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);\n}\n\n@media (min-width: 768px) {\n  .custom-slaydover :deep(.slaydover-container) {\n    \/* Masa\u00fcst\u00fc g\u00f6r\u00fcn\u00fcmde farkl\u0131 bir g\u00f6lge veya kenarl\u0131k *\/\n    border-left: 1px solid #ddd;\n    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);\n  }\n}\n<\/style><\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, taray\u0131c\u0131 geni\u015fli\u011fini (<code>screenWidth<\/code>) takip ediyor ve bu de\u011fere g\u00f6re <code>drawerPosition<\/code> ile <code>drawerSize<\/code> computed property'lerini dinamik olarak ayarl\u0131yoruz. Bu sayede, ekran 768 pikselden k\u00fc\u00e7\u00fck oldu\u011funda \u00e7ekmece soldan ve ekran\u0131n %90'\u0131 geni\u015fli\u011finde a\u00e7\u0131l\u0131rken, daha b\u00fcy\u00fck ekranlarda sa\u011fdan ve 350 piksel geni\u015fli\u011finde a\u00e7\u0131l\u0131yor. Bu, Slaydover'\u0131n dinamik prop'lar arac\u0131l\u0131\u011f\u0131yla nas\u0131l duyarl\u0131 hale getirilebilece\u011fine dair harika bir \u00f6rnektir.<\/p>\n<div class=\"expert-tip\">\n  Uzman \u0130pucu: Slaydover bile\u015feninin kendisine do\u011frudan stil uygulamak yerine, <code>:deep()<\/code> veya <code>::v-deep<\/code> (Vue 2 i\u00e7in) kullanarak Slaydover'\u0131n i\u00e7indeki belirli elemanlar\u0131 hedefleyebilir ve kendi projenizin tasar\u0131m sistemine uygun hale getirebilirsiniz. Bu, bile\u015fenin varsay\u0131lan stillerini ezmek i\u00e7in temiz bir yoldur. Ayr\u0131ca, Slaydover'\u0131n stil dosyas\u0131n\u0131 inceleyerek hangi CSS de\u011fi\u015fkenlerini (custom properties) \u00f6zelle\u015ftirebilece\u011finizi ke\u015ffedebilirsiniz. Bu de\u011fi\u015fkenler, renk, font boyutu gibi temel stil \u00f6zelliklerini kolayca de\u011fi\u015ftirmenizi sa\u011flar.\n<\/div>\n<p>Slaydover'\u0131n sundu\u011fu bu esneklik, geli\u015ftiricilere karma\u015f\u0131k duyarl\u0131 aray\u00fczler tasarlarken b\u00fcy\u00fck bir \u00f6zg\u00fcrl\u00fck tan\u0131r. \u0130ster mobil-first bir yakla\u015f\u0131m benimseyin, ister masa\u00fcst\u00fc \u00f6ncelikli bir tasar\u0131m\u0131n\u0131z olsun, Slaydover projenizin gereksinimlerine kolayca adapte olabilir. Bu, son kullan\u0131c\u0131ya her cihazda tutarl\u0131, eri\u015filebilir ve estetik bir deneyim sunman\u0131n anahtar\u0131d\u0131r.<\/p>\n<h2>Ger\u00e7ek D\u00fcnya Senaryolar\u0131nda Slaydover Kullan\u0131m\u0131: Vaka Analizleri<\/h2>\n<p>Teorik bilgiler ne kadar \u00f6nemli olsa da, bir bile\u015fenin ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6rmek, de\u011ferini tam olarak anlaman\u0131n en iyi yoludur. Slaydover, sadece basit bir overlay veya drawer sa\u011flamakla kalmaz, ayn\u0131 zamanda karma\u015f\u0131k i\u015f ak\u0131\u015flar\u0131n\u0131 ve kullan\u0131c\u0131 etkile\u015fimlerini y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir temel sunar. \u0130\u015fte Slaydover'\u0131n kullan\u0131labilece\u011fi baz\u0131 pop\u00fcler senaryolar ve bu senaryolar\u0131 nas\u0131l uygulayabilece\u011finize dair vaka analizleri.<\/p>\n<h3>Vaka Analizi 1: E-ticaret Sitesi i\u00e7in Mobil Navigasyon ve Filtreleme \u00c7ekmecesi<\/h3>\n<p>E-ticaret siteleri, mobil cihazlarda kullan\u0131c\u0131 dostu navigasyon ve \u00fcr\u00fcn filtreleme yeteneklerine ihtiya\u00e7 duyar. K\u00fc\u00e7\u00fck ekranlarda t\u00fcm men\u00fc \u00f6\u011felerini veya filtre se\u00e7eneklerini ayn\u0131 anda g\u00f6stermek m\u00fcmk\u00fcn de\u011fildir. \u0130\u015fte Slaydover burada devreye girer.<\/p>\n<p><strong>Senaryo:<\/strong> Bir e-ticaret uygulamas\u0131nda, mobil cihaz kullan\u0131c\u0131lar\u0131 i\u00e7in sol tarafta bir ana navigasyon men\u00fcs\u00fc ve sa\u011f tarafta \u00fcr\u00fcn filtreleme ve s\u0131ralama se\u00e7eneklerini i\u00e7eren bir \u00e7ekmece olu\u015fturmak istiyoruz.<\/p>\n<pre><code class=\"language-vue\"><template>\n  <div class=\"e-commerce-layout\">\n    <header>\n      <button @click=\"isNavOpen = true\">Men\u00fc<\/button>\n      <h1>E-ticaret Ma\u011fazas\u0131<\/h1>\n      <button @click=\"isFilterOpen = true\">Filtreler<\/button>\n    <\/header>\n\n    <!-- Ana Navigasyon \u00c7ekmecesi -->\n    <Slaydover v-model:is-open=\"isNavOpen\" position=\"left\" size=\"250px\" close-on-click-outside>\n      <div class=\"nav-drawer-content\">\n        <h3>Kategoriler<\/h3>\n        <ul>\n          <li>Elektronik<\/li>\n          <li>Giyim<\/li>\n          <li>Ev & Ya\u015fam<\/li>\n          <li>Kitaplar<\/li>\n        <\/ul>\n        <button @click=\"isNavOpen = false\">Kapat<\/button>\n      <\/div>\n    <\/Slaydover>\n\n    <!-- Filtreleme \u00c7ekmecesi -->\n    <Slaydover v-model:is-open=\"isFilterOpen\" position=\"right\" size=\"300px\" close-on-click-outside>\n      <div class=\"filter-drawer-content\">\n        <h3>\u00dcr\u00fcn Filtreleri<\/h3>\n        <div class=\"filter-group\">\n          <label>Fiyat Aral\u0131\u011f\u0131:<\/label>\n          <input type=\"range\" min=\"0\" max=\"1000\">\n        <\/div>\n        <div class=\"filter-group\">\n          <label>Marka:<\/label>\n          <select>\n            <option>T\u00fcm\u00fc<\/option>\n            <option>Marka A<\/option>\n            <option>Marka B<\/option>\n          <\/select>\n        <\/div>\n        <button @click=\"isFilterOpen = false\">Uygula<\/button>\n      <\/div>\n    <\/Slaydover>\n\n    <main>\n      <p>\u00dcr\u00fcnler burada listelenir...<\/p>\n    <\/main>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst isNavOpen = ref(false);\nconst isFilterOpen = ref(false);\n<\/script>\n\n<style scoped>\n.e-commerce-layout {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n}\nheader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 15px;\n  background-color: #f4f4f4;\n  border-bottom: 1px solid #eee;\n}\nh1 {\n  font-size: 1.5em;\n  margin: 0;\n}\nbutton {\n  padding: 8px 12px;\n  background-color: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\nbutton:hover {\n  background-color: #0056b3;\n}\n.nav-drawer-content, .filter-drawer-content {\n  padding: 20px;\n  background-color: #fff;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.nav-drawer-content ul {\n  list-style: none;\n  padding: 0;\n  margin-bottom: 20px;\n}\n.nav-drawer-content li {\n  padding: 10px 0;\n  border-bottom: 1px solid #eee;\n  cursor: pointer;\n}\n.filter-group {\n  margin-bottom: 15px;\n}\n.filter-group label {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: bold;\n}\nmain {\n  flex-grow: 1;\n  padding: 20px;\n}\n<\/style><\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, iki farkl\u0131 Slaydover bile\u015feni kullanarak, birini sol taraftan a\u00e7\u0131lan bir navigasyon men\u00fcs\u00fc, di\u011ferini ise sa\u011f taraftan a\u00e7\u0131lan bir filtreleme men\u00fcs\u00fc olarak konumland\u0131rd\u0131k. <code>close-on-click-outside<\/code> prop'u, kullan\u0131c\u0131 \u00e7ekmecenin d\u0131\u015f\u0131na t\u0131klad\u0131\u011f\u0131nda \u00e7ekmecenin otomatik olarak kapanmas\u0131n\u0131 sa\u011flayarak ek bir kullan\u0131m kolayl\u0131\u011f\u0131 sunar.<\/p>\n<h3>Vaka Analizi 2: Form G\u00f6nderimi ve Onay Diyalo\u011fu \u0130\u00e7in Modal Overlay<\/h3>\n<p>Bir kullan\u0131c\u0131 bir form g\u00f6nderdi\u011finde veya kritik bir i\u015flem ger\u00e7ekle\u015ftirmek istedi\u011finde (\u00f6rne\u011fin bir \u00f6\u011feyi silmek), genellikle bir onay veya bilgilendirme mesaj\u0131na ihtiya\u00e7 duyar\u0131z. Bu t\u00fcr durumlar i\u00e7in overlay (modal) kullan\u0131m\u0131 idealdir.<\/p>\n<p><strong>Senaryo:<\/strong> Bir kullan\u0131c\u0131n\u0131n bir formu doldurduktan sonra, g\u00f6nderimini onaylamas\u0131n\u0131 isteyen veya i\u015flemin ba\u015far\u0131yla tamamland\u0131\u011f\u0131n\u0131 bildiren bir modal pencere g\u00f6stermek.<\/p>\n<pre><code class=\"language-vue\"><template>\n  <div class=\"form-page\">\n    <h2>\u00dcr\u00fcn Bilgilerini G\u00fcncelle<\/h2>\n    <form @submit.prevent=\"submitForm\">\n      <div class=\"form-group\">\n        <label for=\"productName\">\u00dcr\u00fcn Ad\u0131:<\/label>\n        <input type=\"text\" id=\"productName\" v-model=\"product.name\" required>\n      <\/div>\n      <div class=\"form-group\">\n        <label for=\"productPrice\">Fiyat:<\/label>\n        <input type=\"number\" id=\"productPrice\" v-model=\"product.price\" required>\n      <\/div>\n      <button type=\"submit\">G\u00fcncelle<\/button>\n    <\/form>\n\n    <!-- Onay\/Bilgilendirme Modal\u0131 -->\n    <Slaydover v-model:is-open=\"isModalOpen\" position=\"center\" size=\"400px\">\n      <div class=\"modal-content\">\n        <h3>Onay Gerekli<\/h3>\n        <p>\u00dcr\u00fcn bilgilerini g\u00fcncellemek istedi\u011finize emin misiniz?<\/p>\n        <div class=\"modal-actions\">\n          <button @click=\"confirmAction\">Evet, G\u00fcncelle<\/button>\n          <button @click=\"cancelAction\" class=\"cancel-button\">\u0130ptal<\/button>\n        <\/div>\n      <\/div>\n    <\/Slaydover>\n\n    <!-- Ba\u015far\u0131 Modal\u0131 -->\n    <Slaydover v-model:is-open=\"isSuccessModalOpen\" position=\"center\" size=\"350px\">\n      <div class=\"modal-content success-modal\">\n        <h3>Ba\u015far\u0131l\u0131!<\/h3>\n        <p>\u00dcr\u00fcn bilgileriniz ba\u015far\u0131yla g\u00fcncellendi.<\/p>\n        <button @click=\"isSuccessModalOpen = false\">Tamam<\/button>\n      <\/div>\n    <\/Slaydover>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref, reactive } from 'vue';\n\nconst product = reactive({\n  name: '\u00d6rnek \u00dcr\u00fcn',\n  price: 99.99\n});\nconst isModalOpen = ref(false);\nconst isSuccessModalOpen = ref(false);\n\nconst submitForm = () => {\n  isModalOpen.value = true; \/\/ Onay modal\u0131n\u0131 a\u00e7\n};\n\nconst confirmAction = () => {\n  \/\/ Burada form g\u00f6nderim mant\u0131\u011f\u0131 veya API \u00e7a\u011fr\u0131s\u0131 yap\u0131labilir\n  console.log('\u00dcr\u00fcn g\u00fcncellendi:', product);\n  isModalOpen.value = false;\n  isSuccessModalOpen.value = true; \/\/ Ba\u015far\u0131 modal\u0131n\u0131 a\u00e7\n};\n\nconst cancelAction = () => {\n  isModalOpen.value = false;\n};\n<\/script>\n\n<style scoped>\n.form-page {\n  max-width: 600px;\n  margin: 50px auto;\n  padding: 30px;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n  background-color: #fff;\n}\n.form-group {\n  margin-bottom: 20px;\n}\n.form-group label {\n  display: block;\n  margin-bottom: 8px;\n  font-weight: bold;\n  color: #333;\n}\n.form-group input[type=\"text\"],\n.form-group input[type=\"number\"] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n  font-size: 1em;\n  box-sizing: border-box; \/* Padding'in geni\u015fli\u011fe dahil olmas\u0131n\u0131 sa\u011flar *\/\n}\nbutton[type=\"submit\"] {\n  padding: 12px 20px;\n  background-color: #28a745;\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1em;\n  transition: background-color 0.2s ease;\n}\nbutton[type=\"submit\"]:hover {\n  background-color: #218838;\n}\n\n.modal-content {\n  background-color: #fff;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n  text-align: center;\n}\n.modal-content h3 {\n  color: #333;\n  margin-bottom: 15px;\n}\n.modal-content p {\n  color: #555;\n  font-size: 1.05em;\n  line-height: 1.5;\n  margin-bottom: 25px;\n}\n.modal-actions button {\n  padding: 10px 20px;\n  margin: 0 10px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1em;\n  transition: background-color 0.2s ease;\n}\n.modal-actions button:first-child {\n  background-color: #007bff;\n  color: white;\n}\n.modal-actions button:first-child:hover {\n  background-color: #0056b3;\n}\n.modal-actions .cancel-button {\n  background-color: #dc3545;\n  color: white;\n}\n.modal-actions .cancel-button:hover {\n  background-color: #c82333;\n}\n.success-modal button {\n  background-color: #28a745;\n  color: white;\n  margin-top: 15px;\n}\n.success-modal button:hover {\n  background-color: #218838;\n}\n<\/style><\/pre>\n<p><\/code><\/p>\n<p>Bu vaka analizleri, Slaydover'\u0131n ne kadar esnek ve farkl\u0131 ihtiya\u00e7lara uygun bir bile\u015fen oldu\u011funu g\u00f6stermektedir. Projenizin gereksinimlerine g\u00f6re \u00e7ekmeceleri veya modallar\u0131 kolayca yap\u0131land\u0131rabilir, dinamik i\u00e7erik ekleyebilir ve kullan\u0131c\u0131 etkile\u015fimini art\u0131rabilirsiniz. Slaydover, bu t\u00fcr ger\u00e7ek d\u00fcnya senaryolar\u0131nda geli\u015ftiricilere b\u00fcy\u00fck kolayl\u0131k sa\u011flayarak, daha az kodla daha fazla i\u015f yapmalar\u0131na olanak tan\u0131r.<\/p>\n<h2>Slaydover'\u0131 Kendi \u0130htiya\u00e7lar\u0131n\u0131za G\u00f6re Nas\u0131l \u00d6zelle\u015ftirirsiniz?<\/h2>\n<p>Slaydover, kutudan \u00e7\u0131kt\u0131\u011f\u0131 haliyle bile olduk\u00e7a kullan\u0131\u015fl\u0131 ve estetik bir \u00e7\u00f6z\u00fcm sunar. Ancak her projenin kendine \u00f6zg\u00fc bir tasar\u0131m dili ve marka kimli\u011fi vard\u0131r. Bu nedenle, Slaydover'\u0131 projenizin genel g\u00f6r\u00fcn\u00fcm ve hissine uyacak \u015fekilde \u00f6zelle\u015ftirebilmek hayati \u00f6nem ta\u015f\u0131r. Slaydover, bu konuda olduk\u00e7a esnek olup, hem prop'lar arac\u0131l\u0131\u011f\u0131yla davran\u0131\u015fsal \u00f6zelle\u015ftirmeler hem de CSS ile g\u00f6rsel \u00f6zelle\u015ftirmeler sunar.<\/p>\n<h3>G\u00f6rsel \u00d6zelle\u015ftirmeler: CSS ile Slaydover'\u0131 \u015eekillendirme<\/h3>\n<p>Slaydover'\u0131n g\u00f6rsel stilini de\u011fi\u015ftirmek i\u00e7in CSS'i kullanabilirsiniz. Bile\u015fenin i\u00e7 yap\u0131s\u0131na eri\u015fmek i\u00e7in genellikle Vue'nun <code>:deep()<\/code> (Vue 3) veya <code>::v-deep<\/code> (Vue 2) pseudo-se\u00e7icilerini kullanman\u0131z gerekebilir, \u00e7\u00fcnk\u00fc bile\u015fenler genellikle kaps\u00fcllenmi\u015f (scoped) stillerle gelir. Ancak Slaydover, genellikle temel bir stil seti sunar ve bu stilleri CSS de\u011fi\u015fkenleri (custom properties) arac\u0131l\u0131\u011f\u0131yla kolayca ge\u00e7ersiz k\u0131lman\u0131za olanak tan\u0131r. Bu, en temiz ve en \u00f6nerilen y\u00f6ntemdir.<\/p>\n<h4>\u00d6rnek: Tema Renklerini ve Animasyon S\u00fcresini De\u011fi\u015ftirme<\/h4>\n<p>Diyelim ki, Slaydover'\u0131n\u0131z\u0131n arka plan rengini, g\u00f6lge stilini ve a\u00e7\u0131l\u0131\u015f\/kapan\u0131\u015f animasyon s\u00fcresini de\u011fi\u015ftirmek istiyorsunuz.<\/p>\n<pre><code class=\"language-css\">\/* App.vue veya global stil dosyan\u0131zda *\/\n:root {\n  --slaydover-backdrop-color: rgba(0, 0, 0, 0.6); \/* Arka plan rengini de\u011fi\u015ftir *\/\n  --slaydover-border-radius: 10px; \/* K\u00f6\u015fe yuvarlakl\u0131\u011f\u0131 ekle *\/\n  --slaydover-transition-duration: 0.4s; \/* Animasyon s\u00fcresini yava\u015flat *\/\n  --slaydover-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); \/* G\u00f6lge stilini g\u00fc\u00e7lendir *\/\n}\n\n\/* \u00d6zel bir Slaydover \u00f6rne\u011fi i\u00e7in *\/\n.my-custom-slaydover :deep(.slaydover-container) {\n  background-color: #f0f8ff; \/* Bile\u015fenin kendi arka plan rengini de\u011fi\u015ftir *\/\n  border: 1px solid #aaddff;\n}\n\n.my-custom-slaydover :deep(.slaydover-backdrop) {\n  backdrop-filter: blur(5px); \/* Arka plan\u0131 bulan\u0131kla\u015ft\u0131r *\/\n}<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, CSS de\u011fi\u015fkenlerini kullanarak global bir etkiyle Slaydover'\u0131n baz\u0131 temel g\u00f6rsel \u00f6zelliklerini de\u011fi\u015ftirdik. Ayr\u0131ca, <code>my-custom-slaydover<\/code> s\u0131n\u0131f\u0131n\u0131 ekledi\u011fimiz bir Slaydover \u00f6rne\u011fi i\u00e7in <code>:deep()<\/code> ile kaps\u00fcllenmi\u015f stilleri hedefleyerek daha spesifik \u00f6zelle\u015ftirmeler yapt\u0131k. Bu sayede, farkl\u0131 Slaydover kullan\u0131mlar\u0131 i\u00e7in farkl\u0131 g\u00f6r\u00fcn\u00fcmler elde edebilirsiniz.<\/p>\n<h3>Davran\u0131\u015fsal \u00d6zelle\u015ftirmeler: Prop'lar ve Olaylar ile Kontrol<\/h3>\n<p>Slaydover, davran\u0131\u015f\u0131n\u0131 kontrol etmek i\u00e7in zengin bir prop seti sunar. Bu prop'lar sayesinde bile\u015fenin nas\u0131l a\u00e7\u0131l\u0131p kapanaca\u011f\u0131n\u0131, nerede konumlanaca\u011f\u0131n\u0131 ve hangi etkile\u015fimlere tepki verece\u011fini belirleyebilirsiniz:<\/p>\n<ul>\n<li><code>v-model:is-open<\/code>: \u00c7ekmecenin veya modal\u0131n a\u00e7\u0131k\/kapal\u0131 durumunu y\u00f6netir. Vue'da \u00e7ift y\u00f6nl\u00fc veri ba\u011flama i\u00e7in idealdir.<\/li>\n<li><code>position<\/code>: Bile\u015fenin nerede g\u00f6r\u00fcnece\u011fini belirler (<code>&#039;left&#039;<\/code>, <code>&#039;right&#039;<\/code>, <code>&#039;top&#039;<\/code>, <code>&#039;bottom&#039;<\/code>, <code>&#039;center&#039;<\/code>). <code>&#039;center&#039;<\/code> genellikle overlay (modal) i\u00e7in kullan\u0131l\u0131r.<\/li>\n<li><code>size<\/code>: Bile\u015fenin geni\u015fli\u011fini (left\/right i\u00e7in) veya y\u00fcksekli\u011fini (top\/bottom i\u00e7in) ayarlar. <code>%<\/code> veya <code>px<\/code> gibi birimlerle kullan\u0131labilir.<\/li>\n<li><code>close-on-click-outside<\/code>: Bile\u015fenin d\u0131\u015f\u0131na t\u0131kland\u0131\u011f\u0131nda otomatik kapan\u0131p kapanmayaca\u011f\u0131n\u0131 kontrol eder (varsay\u0131lan: <code>true<\/code>).<\/li>\n<li><code>close-on-esc<\/code>: <code>Esc<\/code> tu\u015funa bas\u0131ld\u0131\u011f\u0131nda kapan\u0131p kapanmayaca\u011f\u0131n\u0131 kontrol eder (varsay\u0131lan: <code>true<\/code>).<\/li>\n<li><code>disable-scroll<\/code>: Bile\u015fen a\u00e7\u0131kken ana sayfan\u0131n kayd\u0131r\u0131lmas\u0131n\u0131 engelleyip engellemeyece\u011fini belirler (varsay\u0131lan: <code>true<\/code>).<\/li>\n<li><code>transition-name<\/code>: \u00d6zel bir CSS ge\u00e7i\u015f s\u0131n\u0131f\u0131 ad\u0131 atayarak animasyonlar\u0131 tamamen kontrol etmenizi sa\u011flar.<\/li>\n<\/ul>\n<h4>\u00d6rnek: \u00d6zel Animasyon Kullan\u0131m\u0131<\/h4>\n<p>Slaydover'\u0131n varsay\u0131lan animasyonlar\u0131 yerine kendi CSS animasyonlar\u0131n\u0131z\u0131 kullanmak isterseniz, <code>transition-name<\/code> prop'unu kullanabilirsiniz.<\/p>\n<pre><code class=\"language-vue\"><template>\n  <div>\n    <button @click=\"isCustomDrawerOpen = true\">\u00d6zel Animasyonlu \u00c7ekmeceyi A\u00e7<\/button>\n\n    <Slaydover\n      v-model:is-open=\"isCustomDrawerOpen\"\n      position=\"right\"\n      size=\"300px\"\n      transition-name=\"my-fade-slide\"\n    >\n      <div class=\"custom-anim-drawer-content\">\n        <h3>\u00d6zel Animasyon!<\/h3>\n        <p>Bu \u00e7ekmece \u00f6zel bir ge\u00e7i\u015f efektiyle a\u00e7\u0131l\u0131p kapan\u0131yor.<\/p>\n        <button @click=\"isCustomDrawerOpen = false\">Kapat<\/button>\n      <\/div>\n    <\/Slaydover>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref } from 'vue';\nconst isCustomDrawerOpen = ref(false);\n<\/script>\n\n<style>\n\/* my-fade-slide animasyon s\u0131n\u0131flar\u0131 *\/\n.my-fade-slide-enter-active, .my-fade-slide-leave-active {\n  transition: transform 0.5s ease-out, opacity 0.5s ease-out;\n}\n\n.my-fade-slide-enter-from {\n  transform: translateX(100%);\n  opacity: 0;\n}\n.my-fade-slide-leave-to {\n  transform: translateX(100%);\n  opacity: 0;\n}\n\n\/* Arka plan i\u00e7in ayr\u0131 bir ge\u00e7i\u015f ekleyebilirsiniz *\/\n.slaydover-backdrop.my-fade-slide-enter-active,\n.slaydover-backdrop.my-fade-slide-leave-active {\n  transition: opacity 0.5s ease;\n}\n.slaydover-backdrop.my-fade-slide-enter-from,\n.slaydover-backdrop.my-fade-slide-leave-to {\n  opacity: 0;\n}\n\n.custom-anim-drawer-content {\n  padding: 20px;\n  background-color: #e0f7fa;\n  height: 100%;\n}\n<\/style><\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, Vue'nun <code><Transition><\/code> bile\u015feninde kullan\u0131lan standart ge\u00e7i\u015f s\u0131n\u0131flar\u0131n\u0131 (<code>-enter-from<\/code>, <code>-enter-active<\/code>, vb.) <code>transition-name<\/code> olarak belirtilen <code>my-fade-slide<\/code> ile kulland\u0131k. Bu, Slaydover'\u0131n ge\u00e7i\u015flerini tamamen devralman\u0131z\u0131 ve uygulaman\u0131z\u0131n animasyon stilini tutarl\u0131 hale getirmenizi sa\u011flar. Slaydover, sa\u011flad\u0131\u011f\u0131 bu geni\u015f \u00f6zelle\u015ftirme se\u00e7enekleri sayesinde, herhangi bir tasar\u0131m diline veya \u00f6zel bir UI\/UX gereksinimine kolayca adapte olabilir. Bu da onu sadece bir bile\u015fen olmaktan \u00e7\u0131kar\u0131p, projelerinizin vazge\u00e7ilmez bir par\u00e7as\u0131 haline getirir.<\/p>\n<h2>Performans ve Eri\u015filebilirlik: Slaydover ile Optimizasyon \u0130pu\u00e7lar\u0131<\/h2>\n<p>Bir web bile\u015feninin sadece i\u015flevsel veya estetik olmas\u0131 yeterli de\u011fildir; ayn\u0131 zamanda h\u0131zl\u0131, verimli ve herkes taraf\u0131ndan kullan\u0131labilir olmas\u0131 gerekir. Slaydover, \u00e7ekirde\u011finde performans\u0131 ve eri\u015filebilirli\u011fi \u00f6n planda tutarak tasarlanm\u0131\u015ft\u0131r. Ancak geli\u015ftiriciler olarak, bile\u015feni projemize entegre ederken uygulayabilece\u011fimiz ek optimizasyon ipu\u00e7lar\u0131 ve dikkat etmemiz gereken noktalar vard\u0131r.<\/p>\n<h3>Performans Optimizasyonlar\u0131: Uygulaman\u0131z\u0131 H\u0131zland\u0131r\u0131n<\/h3>\n<ol>\n<li><strong>\u0130\u00e7erik Gecikmeli Y\u00fckleme (Lazy Loading):<\/strong> Slaydover i\u00e7eri\u011fi genellikle kullan\u0131c\u0131 bir d\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131nda veya belirli bir eylem ger\u00e7ekle\u015fti\u011finde g\u00f6r\u00fcn\u00fcr hale gelir. E\u011fer Slaydover'\u0131n i\u00e7inde a\u011f\u0131r g\u00f6rseller, karma\u015f\u0131k bile\u015fenler veya b\u00fcy\u00fck veri setleri bar\u0131nd\u0131r\u0131yorsan\u0131z, bu i\u00e7eri\u011fi Slaydover a\u00e7\u0131lana kadar y\u00fcklememek (lazy loading) performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. \u00d6rne\u011fin, <code>v-if<\/code> kullanarak Slaydover a\u00e7\u0131k oldu\u011funda i\u00e7eri\u011fi render edebilirsiniz:<\/li>\n<pre><code class=\"language-vue\"><Slaydover v-model:is-open=\"isOpen\" position=\"right\">\n  <div v-if=\"isOpen\">\n    <!-- A\u011f\u0131r i\u00e7eri\u011finiz buraya gelecek -->\n    <img decoding=\"async\" src=\"large-image.jpg\" loading=\"lazy\">\n    <MyComplexComponent \/>\n  <\/div>\n<\/Slaydover><\/pre>\n<p><\/code><\/p>\n<li><strong>Minimal DOM Manip\u00fclasyonu:<\/strong> Slaydover, a\u00e7\u0131l\u0131p kapan\u0131rken DOM \u00fczerinde minimal de\u011fi\u015fiklik yapacak \u015fekilde tasarlanm\u0131\u015ft\u0131r. Ancak i\u00e7eri\u011finizdeki dinamik \u00f6\u011feler veya yo\u011fun JavaScript i\u015flemleri, bile\u015fenin performans\u0131n\u0131 etkileyebilir. M\u00fcmk\u00fcn oldu\u011funca hafif ve optimize edilmi\u015f bile\u015fenler kullanmaya \u00f6zen g\u00f6sterin.<\/li>\n<li><strong>CSS Ge\u00e7i\u015flerini Ak\u0131ll\u0131ca Kullan\u0131n:<\/strong> Slaydover, CSS tabanl\u0131 ge\u00e7i\u015fler kullan\u0131r. Bu ge\u00e7i\u015fler GPU h\u0131zland\u0131rmal\u0131 oldu\u011fu i\u00e7in genellikle performansl\u0131d\u0131r. Ancak, \u00e7ok karma\u015f\u0131k veya \u00e7ok fazla say\u0131da animasyon kullanmaktan ka\u00e7\u0131n\u0131n. <code>will-change<\/code> CSS \u00f6zelli\u011fi, taray\u0131c\u0131n\u0131n performans optimizasyonlar\u0131 yapmas\u0131na yard\u0131mc\u0131 olabilir, ancak dikkatli kullan\u0131lmal\u0131d\u0131r.<\/li>\n<li><strong>Nuxt.js ve SSR ile Uyum:<\/strong> Nuxt.js kullan\u0131yorsan\u0131z, Slaydover gibi yaln\u0131zca istemci taraf\u0131nda (client-side) etkile\u015fim gerektiren bile\u015fenlerin SSR s\u0131ras\u0131nda render edilmesini engellemek i\u00e7in <code><ClientOnly><\/code> bile\u015fenini kullanabilirsiniz. Bu, sunucu taraf\u0131nda gereksiz i\u015f y\u00fck\u00fcn\u00fc azalt\u0131r ve ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini h\u0131zland\u0131r\u0131r:<\/li>\n<pre><code class=\"language-vue\"><ClientOnly>\n  <Slaydover v-model:is-open=\"isOpen\">\n    <!-- Slaydover i\u00e7eri\u011fi -->\n  <\/Slaydover>\n<\/ClientOnly><\/pre>\n<p><\/code>\n<\/ol>\n<h3>Eri\u015filebilirlik (Accessibility - A11y) Optimizasyonlar\u0131: Herkes \u0130\u00e7in Kullan\u0131labilir Web<\/h3>\n<p>Eri\u015filebilirlik, web sitelerinin ve uygulamalar\u0131n engelli bireyler de dahil olmak \u00fczere herkes taraf\u0131ndan kullan\u0131labilmesini sa\u011flamak anlam\u0131na gelir. Slaydover, temel eri\u015filebilirlik standartlar\u0131n\u0131 kar\u015f\u0131lamak \u00fczere tasarlanm\u0131\u015ft\u0131r, ancak siz de ek ad\u0131mlar atarak bu deneyimi daha da iyile\u015ftirebilirsiniz:<\/p>\n<ol>\n<li><strong>Klavye Navigasyonu:<\/strong> Slaydover a\u00e7\u0131ld\u0131\u011f\u0131nda, odak (focus) genellikle bile\u015fenin i\u00e7ine kayd\u0131r\u0131l\u0131r ve <code>Esc<\/code> tu\u015fuyla kapanabilir. \u0130\u00e7eri\u011finizdeki etkile\u015fimli \u00f6\u011felerin (d\u00fc\u011fmeler, ba\u011flant\u0131lar, form alanlar\u0131) klavye ile ula\u015f\u0131labilir ve kullan\u0131labilir oldu\u011fundan emin olun. <code>Tab<\/code> tu\u015fu ile odaklan\u0131labilir \u00f6\u011feler aras\u0131nda gezinilebilmeli ve <code>Enter<\/code>\/<code>Space<\/code> tu\u015flar\u0131 ile bu \u00f6\u011feler etkinle\u015ftirilebilmelidir.<\/li>\n<li><strong>ARIA Nitelikleri:<\/strong> ARIA (Accessible Rich Internet Applications) nitelikleri, ekran okuyuculara ve di\u011fer yard\u0131mc\u0131 teknolojilere bile\u015fenin rol\u00fc, durumu ve \u00f6zellikleri hakk\u0131nda bilgi sa\u011flar. Slaydover, modal veya drawer rollerini uygun ARIA nitelikleri ile i\u015faretlemelidir. \u0130\u00e7eri\u011finizdeki \u00f6\u011feler i\u00e7in de uygun <code>aria-label<\/code>, <code>aria-describedby<\/code> gibi nitelikleri kullanmay\u0131 unutmay\u0131n. \u00d6rne\u011fin, bir modal ba\u015fl\u0131\u011f\u0131na <code>aria-labelledby<\/code> ile referans verebilirsiniz:<\/li>\n<pre><code class=\"language-html\"><Slaydover v-model:is-open=\"isModalOpen\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalTitle\">\n  <div class=\"modal-content\">\n    <h3 id=\"modalTitle\">\u00dcr\u00fcn Detaylar\u0131<\/h3>\n    <!-- \u0130\u00e7erik -->\n  <\/div>\n<\/Slaydover><\/pre>\n<p><\/code><\/p>\n<li><strong>Odak Y\u00f6netimi (Focus Management):<\/strong> Bir overlay veya drawer a\u00e7\u0131ld\u0131\u011f\u0131nda, klavye oda\u011f\u0131n\u0131n otomatik olarak bu bile\u015fenin i\u00e7ine kayd\u0131r\u0131lmas\u0131 ve bile\u015fen kapand\u0131\u011f\u0131nda eski yerine d\u00f6nmesi \u00f6nemlidir. Slaydover bu davran\u0131\u015f\u0131 temel d\u00fczeyde y\u00f6netir, ancak i\u00e7eri\u011finizdeki \u00f6zel odaklanabilir \u00f6\u011feler i\u00e7in ek mant\u0131k eklemeniz gerekebilir. \u00d6rne\u011fin, modal a\u00e7\u0131ld\u0131\u011f\u0131nda ilk odaklan\u0131labilir \u00f6\u011feye odaklanmay\u0131 sa\u011flayabilirsiniz.<\/li>\n<li><strong>Renk Kontrast\u0131:<\/strong> Slaydover'\u0131n ve i\u00e7eri\u011finizin renkleri aras\u0131ndaki kontrast\u0131n WCAG (Web Content Accessibility Guidelines) y\u00f6nergelerine uygun oldu\u011fundan emin olun. \u00d6zellikle metin ve arka plan renkleri aras\u0131nda yeterli kontrast, g\u00f6rme engelli veya d\u00fc\u015f\u00fck g\u00f6r\u00fc\u015fl\u00fc kullan\u0131c\u0131lar i\u00e7in kritik \u00f6neme sahiptir.<\/li>\n<li><strong>G\u00f6rsel Odak G\u00f6stergeleri:<\/strong> Klavye ile gezinirken, aktif odaklanm\u0131\u015f \u00f6\u011fenin belirgin bir g\u00f6rsel g\u00f6stergeye (\u00f6rne\u011fin bir kenarl\u0131k veya arka plan rengi de\u011fi\u015fikli\u011fi) sahip olmas\u0131 \u00f6nemlidir. Bu, varsay\u0131lan taray\u0131c\u0131 davran\u0131\u015f\u0131 olsa da, \u00f6zel stillerinizde bu g\u00f6stergeleri gizlememeye veya yeterince belirgin yapmaya dikkat edin.<\/li>\n<\/ol>\n<p>Bu ipu\u00e7lar\u0131n\u0131 uygulayarak, Slaydover bile\u015fenini kullanarak olu\u015fturdu\u011funuz aray\u00fczlerin hem h\u0131zl\u0131 hem de kapsay\u0131c\u0131 olmas\u0131n\u0131 sa\u011flayabilirsiniz. Unutmay\u0131n, iyi optimize edilmi\u015f ve eri\u015filebilir bir web uygulamas\u0131, daha geni\u015f bir kitleye ula\u015f\u0131r ve daha iyi bir kullan\u0131c\u0131 deneyimi sunar.<\/p>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>Bu makalede, modern web uygulamalar\u0131 i\u00e7in vazge\u00e7ilmez olan duyarl\u0131 overlay ve drawer bile\u015fenlerini olu\u015fturman\u0131n zorluklar\u0131ndan ve Slaydover'\u0131n bu zorluklar\u0131 nas\u0131l ortadan kald\u0131rd\u0131\u011f\u0131ndan bahsettik. Slaydover'\u0131n Vue ve Nuxt projelerine kolay entegrasyonu, zengin \u00f6zelle\u015ftirme se\u00e7enekleri ve do\u011fal duyarl\u0131l\u0131k yetenekleri sayesinde geli\u015ftiricilerin zaman\u0131ndan tasarruf etti\u011fini ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirdi\u011fini g\u00f6rd\u00fck. Ger\u00e7ek d\u00fcnya vaka analizleri ile e-ticaret sitelerinden form onay diyaloglar\u0131na kadar pek \u00e7ok senaryoda Slaydover'\u0131n ne kadar esnek ve g\u00fc\u00e7l\u00fc bir ara\u00e7 oldu\u011funu kan\u0131tlad\u0131k. Ayr\u0131ca, performans ve eri\u015filebilirlik ipu\u00e7lar\u0131yla, uygulamalar\u0131n\u0131z\u0131n sadece g\u00f6rsel olarak \u00e7ekici de\u011fil, ayn\u0131 zamanda h\u0131zl\u0131 ve herkes taraf\u0131ndan kullan\u0131labilir olmas\u0131n\u0131 sa\u011flaman\u0131n yollar\u0131n\u0131 ke\u015ffettik.<\/p>\n<p>Slaydover, karma\u015f\u0131k UI gereksinimlerini basit ve zarif bir \u00e7\u00f6z\u00fcmle kar\u015f\u0131layarak geli\u015ftiricilerin daha yarat\u0131c\u0131 ve verimli olmalar\u0131n\u0131 sa\u011fl\u0131yor. Uygulamalar\u0131n\u0131zda ak\u0131c\u0131, duyarl\u0131 ve kullan\u0131c\u0131 dostu etkile\u015fimler yaratmak istiyorsan\u0131z, Slaydover kesinlikle g\u00f6z \u00f6n\u00fcnde bulundurman\u0131z gereken bir bile\u015fendir. Unutmay\u0131n, kullan\u0131c\u0131 dostu aray\u00fczler sadece uygulaman\u0131z\u0131n g\u00f6r\u00fcn\u00fc\u015f\u00fcn\u00fc de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n\u0131z\u0131n uygulaman\u0131zla olan ili\u015fkisini de g\u00fc\u00e7lendirir.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<table border=\"1\">\n<thead>\n<tr>\n<th>Soru<\/th>\n<th>Cevap<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Slaydover t\u00fcm taray\u0131c\u0131larda destekleniyor mu?<\/strong><\/td>\n<td>Evet, Slaydover modern taray\u0131c\u0131lar\u0131n (Chrome, Firefox, Safari, Edge vb.) b\u00fcy\u00fck \u00e7o\u011funlu\u011funda sorunsuz \u00e7al\u0131\u015facak \u015fekilde tasarlanm\u0131\u015ft\u0131r. CSS Custom Properties ve Flexbox gibi modern CSS \u00f6zelliklerini kulland\u0131\u011f\u0131 i\u00e7in eski taray\u0131c\u0131lar (IE11 gibi) i\u00e7in fallback gerekebilir, ancak genel olarak geni\u015f bir taray\u0131c\u0131 deste\u011fi sunar.<\/td>\n<\/tr>\n<tr>\n<td><strong>Slaydover, Vue 2 ve Vue 3 ile uyumlu mu?<\/strong><\/td>\n<td>Slaydover, hem Vue 2 (gerekli wrapper'lar veya uyumluluk katmanlar\u0131 ile) hem de Vue 3 ile uyumlu olacak \u015fekilde geli\u015ftirilmi\u015ftir. \u00d6zellikle <code>v-model<\/code> kullan\u0131m\u0131, Vue 3'\u00fcn <code>v-model:arg<\/code> s\u00f6zdizimine uygun olarak tasarlanm\u0131\u015ft\u0131r. Projenizin Vue s\u00fcr\u00fcm\u00fcne g\u00f6re kurulum ve kullan\u0131m detaylar\u0131n\u0131 kontrol etmek en iyisidir.<\/td>\n<\/tr>\n<tr>\n<td><strong>Slaydover'\u0131n varsay\u0131lan stillerini nas\u0131l tamamen kald\u0131rabilirim?<\/strong><\/td>\n<td>Slaydover'\u0131n stil dosyas\u0131n\u0131 (<code>import &#039;slaydover\/dist\/style.css&#039;<\/code>) uygulaman\u0131za import etmeyerek varsay\u0131lan stilleri y\u00fcklemeyebilirsiniz. Bu durumda, t\u00fcm stillendirmeyi kendiniz yapman\u0131z gerekir. Alternatif olarak, CSS de\u011fi\u015fkenlerini kendi \u00f6zel de\u011ferlerinizle ge\u00e7ersiz k\u0131larak veya <code>:deep()<\/code> kullanarak belirli CSS kurallar\u0131n\u0131 ezerek mevcut stiller \u00fczerinde de\u011fi\u015fiklik yapabilirsiniz.<\/td>\n<\/tr>\n<tr>\n<td><strong>Slaydover i\u00e7inde ba\u015fka bile\u015fenler kullanabilir miyim?<\/strong><\/td>\n<td>Kesinlikle! Slaydover, i\u00e7eri\u011fini bir slot arac\u0131l\u0131\u011f\u0131yla ald\u0131\u011f\u0131 i\u00e7in, i\u00e7ine herhangi bir Vue bile\u015fenini, HTML \u00f6\u011fesini veya hatta di\u011fer UI k\u00fct\u00fcphanelerinden bile\u015fenleri yerle\u015ftirebilirsiniz. Bu, Slaydover'\u0131 olduk\u00e7a esnek ve g\u00fc\u00e7l\u00fc bir ara\u00e7 haline getirir.<\/td>\n<\/tr>\n<tr>\n<td><strong>Bir sayfada birden fazla Slaydover bile\u015feni kullanabilir miyim?<\/strong><\/td>\n<td>Evet, istedi\u011finiz kadar Slaydover bile\u015feni kullanabilirsiniz. Her birini ayr\u0131 <code>v-model:is-open<\/code> de\u011fi\u015fkeni ile kontrol etti\u011finiz s\u00fcrece sorunsuz \u00e7al\u0131\u015facaklard\u0131r. Bu sayede, ayn\u0131 anda hem bir navigasyon men\u00fcs\u00fc hem de bir bildirim modal\u0131 gibi farkl\u0131 etkile\u015fimleri y\u00f6netebilirsiniz.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"Slaydover: Vue ve Nuxt \u0130\u00e7in Duyarl\u0131 Overlay &#038; Drawer Bile\u015feni Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-32386","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Geli\u015ftirmede Overlay ve Drawer Bile\u015fenlerinin \u00d6nemi Nedir?<\/title>\n<meta name=\"description\" content=\"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve etkile\u015fimi art\u0131ran dinamik aray\u00fcz elemanlar\u0131 vazge\u00e7ilmezdir. \u00d6zellikle mobil cihazlarda ve farkl\u0131 ekran boyutlar\u0131nda sorunsuz \u00e7al\u0131\u015fan, esnek ve duyarl\u0131 overlay (bindirme) ile drawer (\u00e7ekmece) bile\u015fenleri olu\u015fturmak, geli\u015ftiriciler i\u00e7in zaman zaman karma\u015f\u0131k bir s\u00fcre\u00e7 haline gelebilir. Peki, Vue veya Nuxt tabanl\u0131 projelerinizde bu zorluklar\u0131n \u00fcstesinden gelmek ve h\u0131zl\u0131ca harika kullan\u0131c\u0131 aray\u00fczleri in\u015fa etmek m\u00fcmk\u00fcn m\u00fc? \u0130\u015fte tam bu noktada, Slaydover devreye girerek hem performans\u0131 hem de geli\u015ftirici deneyimini bir \u00fcst seviyeye ta\u015f\u0131yor. Bu makalede, Slaydover&#039;\u0131n ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve projelerinizde nas\u0131l etkin bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, duyarl\u0131 ve kullan\u0131c\u0131 dostu aray\u00fczlerin kap\u0131lar\u0131n\u0131 birlikte aralayal\u0131m.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Geli\u015ftirmede Overlay ve Drawer Bile\u015fenlerinin \u00d6nemi Nedir?\" \/>\n<meta property=\"og:description\" content=\"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve etkile\u015fimi art\u0131ran dinamik aray\u00fcz elemanlar\u0131 vazge\u00e7ilmezdir. \u00d6zellikle mobil cihazlarda ve farkl\u0131 ekran boyutlar\u0131nda sorunsuz \u00e7al\u0131\u015fan, esnek ve duyarl\u0131 overlay (bindirme) ile drawer (\u00e7ekmece) bile\u015fenleri olu\u015fturmak, geli\u015ftiriciler i\u00e7in zaman zaman karma\u015f\u0131k bir s\u00fcre\u00e7 haline gelebilir. Peki, Vue veya Nuxt tabanl\u0131 projelerinizde bu zorluklar\u0131n \u00fcstesinden gelmek ve h\u0131zl\u0131ca harika kullan\u0131c\u0131 aray\u00fczleri in\u015fa etmek m\u00fcmk\u00fcn m\u00fc? \u0130\u015fte tam bu noktada, Slaydover devreye girerek hem performans\u0131 hem de geli\u015ftirici deneyimini bir \u00fcst seviyeye ta\u015f\u0131yor. Bu makalede, Slaydover&#039;\u0131n ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve projelerinizde nas\u0131l etkin bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, duyarl\u0131 ve kullan\u0131c\u0131 dostu aray\u00fczlerin kap\u0131lar\u0131n\u0131 birlikte aralayal\u0131m.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-21T02:01:37+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Web Geli\u015ftirmede Overlay ve Drawer Bile\u015fenlerinin \u00d6nemi Nedir?\",\"datePublished\":\"2025-10-21T02:01:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/\"},\"wordCount\":3998,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/\",\"name\":\"Web Geli\u015ftirmede Overlay ve Drawer Bile\u015fenlerinin \u00d6nemi Nedir?\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-21T02:01:37+00:00\",\"description\":\"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve etkile\u015fimi art\u0131ran dinamik aray\u00fcz elemanlar\u0131 vazge\u00e7ilmezdir. \u00d6zellikle mobil cihazlarda ve farkl\u0131 ekran boyutlar\u0131nda sorunsuz \u00e7al\u0131\u015fan, esnek ve duyarl\u0131 overlay (bindirme) ile drawer (\u00e7ekmece) bile\u015fenleri olu\u015fturmak, geli\u015ftiriciler i\u00e7in zaman zaman karma\u015f\u0131k bir s\u00fcre\u00e7 haline gelebilir. Peki, Vue veya Nuxt tabanl\u0131 projelerinizde bu zorluklar\u0131n \u00fcstesinden gelmek ve h\u0131zl\u0131ca harika kullan\u0131c\u0131 aray\u00fczleri in\u015fa etmek m\u00fcmk\u00fcn m\u00fc? \u0130\u015fte tam bu noktada, Slaydover devreye girerek hem performans\u0131 hem de geli\u015ftirici deneyimini bir \u00fcst seviyeye ta\u015f\u0131yor. Bu makalede, Slaydover'\u0131n ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve projelerinizde nas\u0131l etkin bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, duyarl\u0131 ve kullan\u0131c\u0131 dostu aray\u00fczlerin kap\u0131lar\u0131n\u0131 birlikte aralayal\u0131m.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Geli\u015ftirmede Overlay ve Drawer Bile\u015fenlerinin \u00d6nemi Nedir?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Web Geli\u015ftirmede Overlay ve Drawer Bile\u015fenlerinin \u00d6nemi Nedir?","description":"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve etkile\u015fimi art\u0131ran dinamik aray\u00fcz elemanlar\u0131 vazge\u00e7ilmezdir. \u00d6zellikle mobil cihazlarda ve farkl\u0131 ekran boyutlar\u0131nda sorunsuz \u00e7al\u0131\u015fan, esnek ve duyarl\u0131 overlay (bindirme) ile drawer (\u00e7ekmece) bile\u015fenleri olu\u015fturmak, geli\u015ftiriciler i\u00e7in zaman zaman karma\u015f\u0131k bir s\u00fcre\u00e7 haline gelebilir. Peki, Vue veya Nuxt tabanl\u0131 projelerinizde bu zorluklar\u0131n \u00fcstesinden gelmek ve h\u0131zl\u0131ca harika kullan\u0131c\u0131 aray\u00fczleri in\u015fa etmek m\u00fcmk\u00fcn m\u00fc? \u0130\u015fte tam bu noktada, Slaydover devreye girerek hem performans\u0131 hem de geli\u015ftirici deneyimini bir \u00fcst seviyeye ta\u015f\u0131yor. Bu makalede, Slaydover'\u0131n ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve projelerinizde nas\u0131l etkin bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, duyarl\u0131 ve kullan\u0131c\u0131 dostu aray\u00fczlerin kap\u0131lar\u0131n\u0131 birlikte aralayal\u0131m.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/","og_locale":"tr_TR","og_type":"article","og_title":"Web Geli\u015ftirmede Overlay ve Drawer Bile\u015fenlerinin \u00d6nemi Nedir?","og_description":"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve etkile\u015fimi art\u0131ran dinamik aray\u00fcz elemanlar\u0131 vazge\u00e7ilmezdir. \u00d6zellikle mobil cihazlarda ve farkl\u0131 ekran boyutlar\u0131nda sorunsuz \u00e7al\u0131\u015fan, esnek ve duyarl\u0131 overlay (bindirme) ile drawer (\u00e7ekmece) bile\u015fenleri olu\u015fturmak, geli\u015ftiriciler i\u00e7in zaman zaman karma\u015f\u0131k bir s\u00fcre\u00e7 haline gelebilir. Peki, Vue veya Nuxt tabanl\u0131 projelerinizde bu zorluklar\u0131n \u00fcstesinden gelmek ve h\u0131zl\u0131ca harika kullan\u0131c\u0131 aray\u00fczleri in\u015fa etmek m\u00fcmk\u00fcn m\u00fc? \u0130\u015fte tam bu noktada, Slaydover devreye girerek hem performans\u0131 hem de geli\u015ftirici deneyimini bir \u00fcst seviyeye ta\u015f\u0131yor. Bu makalede, Slaydover'\u0131n ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve projelerinizde nas\u0131l etkin bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, duyarl\u0131 ve kullan\u0131c\u0131 dostu aray\u00fczlerin kap\u0131lar\u0131n\u0131 birlikte aralayal\u0131m.","og_url":"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-21T02:01:37+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"20 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Web Geli\u015ftirmede Overlay ve Drawer Bile\u015fenlerinin \u00d6nemi Nedir?","datePublished":"2025-10-21T02:01:37+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/"},"wordCount":3998,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/","url":"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/","name":"Web Geli\u015ftirmede Overlay ve Drawer Bile\u015fenlerinin \u00d6nemi Nedir?","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-21T02:01:37+00:00","description":"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve etkile\u015fimi art\u0131ran dinamik aray\u00fcz elemanlar\u0131 vazge\u00e7ilmezdir. \u00d6zellikle mobil cihazlarda ve farkl\u0131 ekran boyutlar\u0131nda sorunsuz \u00e7al\u0131\u015fan, esnek ve duyarl\u0131 overlay (bindirme) ile drawer (\u00e7ekmece) bile\u015fenleri olu\u015fturmak, geli\u015ftiriciler i\u00e7in zaman zaman karma\u015f\u0131k bir s\u00fcre\u00e7 haline gelebilir. Peki, Vue veya Nuxt tabanl\u0131 projelerinizde bu zorluklar\u0131n \u00fcstesinden gelmek ve h\u0131zl\u0131ca harika kullan\u0131c\u0131 aray\u00fczleri in\u015fa etmek m\u00fcmk\u00fcn m\u00fc? \u0130\u015fte tam bu noktada, Slaydover devreye girerek hem performans\u0131 hem de geli\u015ftirici deneyimini bir \u00fcst seviyeye ta\u015f\u0131yor. Bu makalede, Slaydover'\u0131n ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve projelerinizde nas\u0131l etkin bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, duyarl\u0131 ve kullan\u0131c\u0131 dostu aray\u00fczlerin kap\u0131lar\u0131n\u0131 birlikte aralayal\u0131m.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/web-gelistirmede-overlay-ve-drawer-bilesenlerinin-onemi-nedir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Geli\u015ftirmede Overlay ve Drawer Bile\u015fenlerinin \u00d6nemi Nedir?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=32386"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32386\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}