React uygulamalar\u0131n\u0131zda kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) bile\u015fenleri tasarlarken, \u00e7o\u011fu zaman standart HTML \u00f6\u011felerinin \u00f6tesine ge\u00e7me ihtiyac\u0131 hissedersiniz. \u00d6zellikle etkile\u015fimli ve g\u00f6rsel olarak \u00e7ekici bile\u015fenler s\u00f6z konusu oldu\u011funda, \u00f6zel \u00e7\u00f6z\u00fcmler geli\u015ftirmek hem tasar\u0131m esnekli\u011fi hem de marka kimli\u011fi a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Bu makalede, React kullanarak s\u0131f\u0131rdan, tamamen \u00f6zelle\u015ftirilebilir, eri\u015filebilir ve yeniden kullan\u0131labilir bir toggle (a\u00e7ma\/kapama) anahtar\u0131 bile\u015feni nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
Toggle anahtarlar\u0131, bir ayar\u0131n iki durumu aras\u0131nda (\u00f6rne\u011fin, a\u00e7\u0131k\/kapal\u0131, evet\/hay\u0131r) ge\u00e7i\u015f yapmak i\u00e7in kullan\u0131lan temel UI \u00f6\u011feleridir. Taray\u0131c\u0131lar\u0131n varsay\u0131lan \u00d6zel toggle anahtar\u0131m\u0131z\u0131 olu\u015fturmaya, React’\u0131n temel bile\u015fen yap\u0131s\u0131 ve state y\u00f6netimi ile ba\u015flayaca\u011f\u0131z. Bir toggle anahtar\u0131n\u0131n en temel \u00f6zelli\u011fi, i\u00e7sel bir “a\u00e7\u0131k” veya “kapal\u0131” durumunu y\u00f6netmesidir. Bu durumu React’\u0131n \u0130lk ad\u0131m olarak, Bu kod par\u00e7as\u0131nda: Bu temel yap\u0131, toggle anahtar\u0131m\u0131z\u0131n davran\u0131\u015fsal mant\u0131\u011f\u0131n\u0131 olu\u015fturur. Ancak hen\u00fcz g\u00f6rsel bir kar\u015f\u0131l\u0131\u011f\u0131 yoktur.<\/p>\n Yukar\u0131daki JSX yap\u0131s\u0131, toggle anahtar\u0131m\u0131z\u0131n g\u00f6rsel iskeletini olu\u015fturur. Bu basit JSX yap\u0131s\u0131, CSS ile birle\u015fti\u011finde g\u00f6rsel olarak tatmin edici bir toggle anahtar\u0131 olu\u015fturmam\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n \u015eimdi, Bu temel stiller, toggle anahtar\u0131m\u0131z\u0131n kapal\u0131 durumdaki g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve s\u00fcrg\u00fcn\u00fcn ba\u015flang\u0131\u00e7 konumunu belirler. \u015eimdi, anahtar Burada, E\u011fer projenizde SCSS (Sass) kullan\u0131yorsan\u0131z, stillerinizi daha mod\u00fcler ve okunabilir hale getirebilirsiniz. SCSS, i\u00e7 i\u00e7e yaz\u0131m (nesting), de\u011fi\u015fkenler, mixin’ler ve fonksiyonlar gibi g\u00fc\u00e7l\u00fc \u00f6zellikler sunar.<\/p>\n \u00d6ncelikle, projenize Sass’\u0131 kurman\u0131z gerekebilir ( Ve SCSS ile de\u011fi\u015fkenler kullanarak de\u011ferleri kolayca y\u00f6netebilir ve i\u00e7 i\u00e7e yaz\u0131m ile daha okunabilir bir yap\u0131 elde edebilirsiniz. Ayr\u0131ca, CSS Modules kullanmak, stil \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nleyerek bile\u015fen tabanl\u0131 geli\u015ftirme i\u00e7in ideal bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n Bir UI bile\u015feni tasarlarken eri\u015filebilirlik, yaln\u0131zca belirli kullan\u0131c\u0131 gruplar\u0131 i\u00e7in de\u011fil, herkes i\u00e7in daha iyi bir kullan\u0131c\u0131 deneyimi sa\u011flaman\u0131n temelidir. G\u00f6rme engelliler i\u00e7in ekran okuyucular, motor engelliler i\u00e7in klavye navigasyonu gibi konular\u0131 ele alarak toggle anahtar\u0131m\u0131z\u0131 eri\u015filebilir hale getirmeliyiz.<\/p>\n Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri (WCAG), web i\u00e7eri\u011fini daha eri\u015filebilir hale getirmek i\u00e7in uluslararas\u0131 bir standartt\u0131r. Bu standartlara uymak, yasal y\u00fck\u00fcml\u00fcl\u00fcklerin yan\u0131 s\u0131ra, \u00fcr\u00fcn\u00fcn\u00fcz\u00fcn daha geni\u015f bir kitleye ula\u015fmas\u0131n\u0131 ve herkes i\u00e7in kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar. \u00d6zel bir toggle anahtar\u0131 olu\u015ftururken, varsay\u0131lan HTML WAI-ARIA (Web Accessibility Initiative \u2013 Accessible Rich Internet Applications) \u00f6zellikleri, HTML’in anlamsal yeteneklerini geni\u015fleterek, dinamik i\u00e7erik ve \u00f6zel UI bile\u015fenlerinin eri\u015filebilirli\u011fini art\u0131r\u0131r. Toggle anahtar\u0131m\u0131z i\u00e7in a\u015fa\u011f\u0131daki ARIA \u00f6zelliklerini kullanaca\u011f\u0131z:<\/p>\n * Eri\u015filebilirlik i\u00e7in en sa\u011flam yakla\u015f\u0131mlardan biri, g\u00f6rsel olarak gizlenmi\u015f ancak eri\u015filebilirlik a\u011fac\u0131nda var olan bir <\/code> \u00f6\u011fesi bu i\u015flevi yerine getirse de, stil a\u00e7\u0131s\u0131ndan s\u0131n\u0131rl\u0131d\u0131r ve modern UI tasar\u0131mlar\u0131na genellikle uymaz. Bu nedenle, kendi \u00f6zel toggle anahtar\u0131m\u0131z\u0131 olu\u015fturarak hem g\u00f6rsel kontrol\u00fc ele alacak hem de eri\u015filebilirlik standartlar\u0131n\u0131 g\u00f6z ard\u0131 etmeyece\u011fiz. Bu s\u00fcre\u00e7te React’\u0131n state y\u00f6netimi, prop’lar, olay dinleyicileri ve modern CSS tekniklerini bir araya getirece\u011fiz.<\/p>\nTemel Bile\u015fen Yap\u0131s\u0131 ve State Y\u00f6netimi<\/h3>\n
useState<\/code> hook’u ile y\u00f6netece\u011fiz.<\/p>\nToggle Bile\u015feni Olu\u015fturma<\/h4>\n
ToggleSwitch.js<\/code> ad\u0131nda yeni bir dosya olu\u015ftural\u0131m ve temel React functional component yap\u0131s\u0131n\u0131 kural\u0131m.<\/p>\n\/\/ ToggleSwitch.js\nimport React, { useState } from 'react';\nimport '.\/ToggleSwitch.css'; \/\/ Stil dosyam\u0131z\u0131 import edece\u011fiz\n\nconst ToggleSwitch = ({ initialChecked = false, onChange, label }) => {\n const [isChecked, setIsChecked] = useState(initialChecked);\n\n const handleToggle = () => {\n const newState = !isChecked;\n setIsChecked(newState);\n if (onChange) {\n onChange(newState); \/\/ D\u0131\u015far\u0131ya durumu bildir\n }\n };\n\n return (\n
\n* useState(initialChecked)<\/code>: Bile\u015fenin ba\u015flang\u0131\u00e7 durumunu initialChecked<\/code> prop’u ile belirler ve isChecked<\/code> ad\u0131nda bir state de\u011fi\u015fkeni ile bu durumu takip ederiz. setIsChecked<\/code> fonksiyonu ile bu durumu g\u00fcncelleriz.
\n* handleToggle<\/code>: Anahtara t\u0131kland\u0131\u011f\u0131nda \u00e7al\u0131\u015fan bir fonksiyondur. Mevcut isChecked<\/code> durumunu tersine \u00e7evirir, setIsChecked<\/code> ile bile\u015fenin dahili durumunu g\u00fcnceller ve e\u011fer bir onChange<\/code> prop’u tan\u0131mlanm\u0131\u015fsa, bu prop’u yeni durumla birlikte \u00e7a\u011f\u0131rarak d\u0131\u015far\u0131ya bir bildirim g\u00f6nderir. Bu, bile\u015fenin ebeveynlerinin anahtar\u0131n durum de\u011fi\u015fikliklerinden haberdar olmas\u0131n\u0131 sa\u011flar.
\n* label<\/code>: Toggle anahtar\u0131na e\u015flik eden bir metin etiketi sa\u011flamak i\u00e7in kullan\u0131l\u0131r.
\n* toggle-switch-container<\/code>: Etiket ve anahtar\u0131n kendisini saran bir kapsay\u0131c\u0131d\u0131r.
\n* toggle-switch<\/code>: Anahtar\u0131n genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc temsil eden ana div<\/code> \u00f6\u011fesidir. is-checked<\/code> s\u0131n\u0131f\u0131, anahtar\u0131n a\u00e7\u0131k oldu\u011fu durumlarda stil de\u011fi\u015fiklikleri uygulamak i\u00e7in kullan\u0131l\u0131r.
\n* toggle-switch-thumb<\/code>: Anahtar\u0131n i\u00e7inde hareket eden “ba\u015fparmak” veya “s\u00fcrg\u00fc” k\u0131sm\u0131n\u0131 temsil eder.<\/p>\nG\u00f6rsel Temsil ve JSX<\/h4>\n
toggle-switch<\/code> s\u0131n\u0131f\u0131na sahip div<\/code>, anahtar\u0131n “yolunu” veya “izini” temsil ederken, toggle-switch-thumb<\/code> s\u0131n\u0131f\u0131na sahip i\u00e7 div<\/code> ise bu yol \u00fczerinde hareket eden d\u00fc\u011fmeyi temsil eder. is-checked<\/code> s\u0131n\u0131f\u0131 ise anahtar\u0131n a\u00e7\u0131k durumdayken farkl\u0131 bir g\u00f6r\u00fcn\u00fcme sahip olmas\u0131n\u0131 sa\u011flayacak kilit noktad\u0131r. Bu s\u0131n\u0131fa ba\u011fl\u0131 olarak arka plan rengi ve s\u00fcrg\u00fcn\u00fcn konumu de\u011fi\u015fecektir.<\/p>\nStil Olu\u015fturma (CSS\/SCSS)<\/h3>\n
ToggleSwitch.js<\/code> dosyas\u0131nda referans verdi\u011fimiz ToggleSwitch.css<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m ve toggle anahtar\u0131m\u0131za hayat veren stilleri ekleyelim. Bu b\u00f6l\u00fcmde, hem temel CSS kullan\u0131m\u0131 hem de SCSS gibi \u00f6n i\u015flemcilerle daha d\u00fczenli ve s\u00fcrd\u00fcr\u00fclebilir stil yazma yakla\u015f\u0131mlar\u0131na de\u011finece\u011fiz.<\/p>\nTemel Stil Kurulumu<\/h4>\n
ToggleSwitch.css<\/code> dosyam\u0131za a\u015fa\u011f\u0131daki temel stilleri ekleyelim:<\/p>\n\/ ToggleSwitch.css <\/em>\/\n\n.toggle-switch-container {\n display: flex;\n align-items: center;\n gap: 10px; \/ Etiket ve anahtar aras\u0131na bo\u015fluk <\/em>\/\n cursor: pointer; \/ Kapsay\u0131c\u0131n\u0131n tamam\u0131n\u0131n t\u0131klanabilir oldu\u011funu belirtir <\/em>\/\n user-select: none; \/ Metin se\u00e7imini engeller <\/em>\/\n}\n\n.toggle-switch-label {\n font-family: sans-serif;\n font-size: 1rem;\n color: #333;\n}\n\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 50px; \/ Anahtar\u0131n geni\u015fli\u011fi <\/em>\/\n height: 28px; \/ Anahtar\u0131n y\u00fcksekli\u011fi <\/em>\/\n background-color: #ccc; \/ Kapal\u0131 durum arka plan rengi <\/em>\/\n border-radius: 14px; \/ Yar\u0131\u00e7ap\u0131n yar\u0131s\u0131 ile tamamen yuvarlak kenarlar <\/em>\/\n transition: background-color 0.2s ease-in-out; \/ Renk ge\u00e7i\u015fi animasyonu <\/em>\/\n flex-shrink: 0; \/ Kapsay\u0131c\u0131 k\u00fc\u00e7\u00fcld\u00fc\u011f\u00fcnde anahtar\u0131n boyutunu koru <\/em>\/\n}\n\n.toggle-switch-thumb {\n position: absolute;\n top: 2px; \/ Anahtar\u0131n i\u00e7indeki s\u00fcrg\u00fcn\u00fcn dikey konumu <\/em>\/\n left: 2px; \/ Anahtar\u0131n i\u00e7indeki s\u00fcrg\u00fcn\u00fcn yatay konumu <\/em>\/\n width: 24px; \/ S\u00fcrg\u00fcn\u00fcn geni\u015fli\u011fi <\/em>\/\n height: 24px; \/ S\u00fcrg\u00fcn\u00fcn y\u00fcksekli\u011fi <\/em>\/\n background-color: white; \/ S\u00fcrg\u00fcn\u00fcn rengi <\/em>\/\n border-radius: 50%; \/ Tamamen yuvarlak bir s\u00fcrg\u00fc <\/em>\/\n transition: transform 0.2s ease-in-out; \/ S\u00fcrg\u00fc konumu ge\u00e7i\u015fi animasyonu <\/em>\/\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); \/ Hafif bir g\u00f6lge efekti <\/em>\/\n}<\/code><\/pre>\ntransition<\/code> \u00f6zellikleri, durum de\u011fi\u015fikliklerinde yumu\u015fak animasyonlar sa\u011flamak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\nA\u00e7\u0131k\/Kapal\u0131 Durumlar\u0131 \u0130\u00e7in Stil<\/h4>\n
is-checked<\/code> durumundayken nas\u0131l g\u00f6r\u00fcnece\u011fini tan\u0131mlayal\u0131m. Bu, React bile\u015fenimizdeki ko\u015fullu s\u0131n\u0131fland\u0131rma ile uyumlu olacakt\u0131r.<\/p>\n\/ ToggleSwitch.css (devam\u0131) <\/em>\/\n\n.toggle-switch.is-checked {\n background-color: #4CAF50; \/ A\u00e7\u0131k durum arka plan rengi (\u00f6rne\u011fin, ye\u015fil) <\/em>\/\n}\n\n.toggle-switch.is-checked .toggle-switch-thumb {\n transform: translateX(22px); \/ S\u00fcrg\u00fcy\u00fc sa\u011fa kayd\u0131r (geni\u015flik - s\u00fcrg\u00fc geni\u015fli\u011fi - 2<\/em>padding) *\/\n}<\/code><\/pre>\n.toggle-switch.is-checked<\/code> s\u0131n\u0131f\u0131, anahtar a\u00e7\u0131k oldu\u011funda arka plan rengini ye\u015file \u00e7evirir. .toggle-switch.is-checked .toggle-switch-thumb<\/code> ise s\u00fcrg\u00fcy\u00fc sa\u011fa do\u011fru 22 piksel kayd\u0131r\u0131r. Bu de\u011fer, anahtar\u0131n toplam geni\u015fli\u011fi (50px) eksi s\u00fcrg\u00fcn\u00fcn geni\u015fli\u011fi (24px) eksi her iki taraftan 2’\u015fer piksel bo\u015fluk (toplam 4px) g\u00f6z \u00f6n\u00fcnde bulundurularak hesaplanm\u0131\u015ft\u0131r: 50 - 24 - (2*2) = 22px<\/code>. Bu, s\u00fcrg\u00fcn\u00fcn anahtar\u0131n i\u00e7inde d\u00fczg\u00fcn bir \u015fekilde hareket etmesini sa\u011flar.<\/p>\nSCSS Kullan\u0131m\u0131 (Opsiyonel ama iyi bir pratik)<\/h4>\n
npm install sass<\/code> veya yarn add sass<\/code>). Ard\u0131ndan, ToggleSwitch.css<\/code> dosyas\u0131n\u0131 ToggleSwitch.module.scss<\/code> olarak yeniden adland\u0131rabiliriz (CSS Modules ile birlikte kullanmak yayg\u0131n bir pratiktir).<\/p>\n\/ ToggleSwitch.module.scss <\/em>\/\n\n$toggle-width: 50px;\n$toggle-height: 28px;\n$thumb-size: 24px;\n$thumb-offset: 2px; \/\/ \u0130\u00e7 bo\u015fluk\n$border-radius: $toggle-height \/ 2;\n\n$color-off: #ccc;\n$color-on: #4CAF50;\n$color-thumb: white;\n$color-label: #333;\n\n.toggle-switch-container {\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n user-select: none;\n}\n\n.toggle-switch-label {\n font-family: sans-serif;\n font-size: 1rem;\n color: $color-label;\n}\n\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: $toggle-width;\n height: $toggle-height;\n background-color: $color-off;\n border-radius: $border-radius;\n transition: background-color 0.2s ease-in-out;\n flex-shrink: 0;\n\n .toggle-switch-thumb {\n position: absolute;\n top: $thumb-offset;\n left: $thumb-offset;\n width: $thumb-size;\n height: $thumb-size;\n background-color: $color-thumb;\n border-radius: 50%;\n transition: transform 0.2s ease-in-out;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n }\n\n &.is-checked {\n background-color: $color-on;\n\n .toggle-switch-thumb {\n transform: translateX($toggle-width - $thumb-size - (2 * $thumb-offset));\n }\n }\n}<\/code><\/pre>\nToggleSwitch.js<\/code> dosyas\u0131nda stil importunu g\u00fcncelleyin:<\/p>\n\/\/ ToggleSwitch.js\nimport React, { useState } from 'react';\nimport styles from '.\/ToggleSwitch.module.scss'; \/\/ SCSS Modules importu\n\nconst ToggleSwitch = ({ initialChecked = false, onChange, label }) => {\n const [isChecked, setIsChecked] = useState(initialChecked);\n\n const handleToggle = () => {\n const newState = !isChecked;\n setIsChecked(newState);\n if (onChange) {\n onChange(newState);\n }\n };\n\n return (\n Eri\u015filebilirlik (Accessibility – A11y)<\/h3>\n
Neden Eri\u015filebilirlik \u00d6nemli?<\/h4>\n
<\/code> \u00f6\u011fesinin sa\u011flad\u0131\u011f\u0131 yerle\u015fik eri\u015filebilirlik \u00f6zelliklerini kaybederiz. Bu nedenle, bu \u00f6zellikleri manuel olarak eklememiz gerekir.<\/p>\nARIA \u00d6zellikleri<\/h4>\n
role=\"switch\"<\/code>: Bu, \u00f6\u011fenin bir anahtar oldu\u011funu ekran okuyuculara bildirir.
\n* aria-checked<\/code>: Anahtar\u0131n mevcut durumunu (true\/false) belirtir. Bu de\u011fer dinamik olarak isChecked<\/code> state’imize ba\u011fl\u0131 olacakt\u0131r.
\n* aria-labelledby<\/code> veya aria-label<\/code>: Anahtar\u0131n amac\u0131n\u0131 a\u00e7\u0131klayan bir etiket sa\u011flar. E\u011fer g\u00f6rsel bir label<\/code> prop’u kullan\u0131yorsak, aria-labelledby<\/code> ile bu etikete referans verebiliriz. Aksi takdirde, do\u011frudan aria-label<\/code> kullanabiliriz.<\/p>\n<\/code> \u00f6\u011fesi kullanmakt\u0131r. Bu, taray\u0131c\u0131n\u0131n yerle\u015fik eri\u015filebilirlik \u00f6zelliklerinden (klavye navigasyonu, ARIA rolleri) faydalanmam\u0131z\u0131 sa\u011flar ve manuel olarak bir\u00e7ok \u015feyi y\u00f6netme y\u00fck\u00fcn\u00fc azalt\u0131r.<\/p>\nToggleSwitch.js<\/code> dosyam\u0131z\u0131 g\u00fcncelleyelim:<\/p>\n\/\/ ToggleSwitch.js (Eri\u015filebilirlik g\u00fcncellemeleri)\nimport React, { useState, useRef, useId } from 'react'; \/\/ useId hook'unu ekledik\nimport styles from '.\/ToggleSwitch.module.scss';\n\nconst ToggleSwitch = ({ initialChecked = false, onChange, label, disabled = false }) => {\n const [isChecked, setIsChecked] = useState(initialChecked);\n const inputRef = useRef(null);\n const uniqueId = useId(); \/\/ Benzersiz ID olu\u015fturmak i\u00e7in useId kullan\u0131yoruz\n\n const handleToggle = () => {\n if (disabled) return; \/\/ Devre d\u0131\u015f\u0131 ise i\u015flem yapma\n\n const newState = !isChecked;\n setIsChecked(newState);\n if (onChange) {\n onChange(newState);\n }\n \/\/ Gizli input'un durumunu manuel olarak g\u00fcncelle\n if (inputRef.current) {\n inputRef.current.checked = newState;\n }\n };\n\n const handleKeyDown = (event) => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault(); \/\/ Varsay\u0131lan kayd\u0131rma\/g\u00f6nderme davran\u0131\u015f\u0131n\u0131 engelle\n handleToggle();\n }\n };\n\n return (\n