Modern web uygulamalar\u0131nda kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) tasar\u0131m\u0131n\u0131n temel ta\u015flar\u0131ndan biri olan sekmeler (tabs), i\u00e7eri\u011fi d\u00fczenli bir \u015fekilde sunarak kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. Bir sayfada birden fazla bilgi grubunu ayn\u0131 anda g\u00f6stermek yerine, sekmeler sayesinde kullan\u0131c\u0131lar ilgilendikleri i\u00e7eri\u011fe odaklanabilirler. Bu rehberde, React kullanarak hem i\u015flevsel hem de eri\u015filebilir bir sekmeler bile\u015fenini ad\u0131m ad\u0131m nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 \u00f6\u011frenece\u011fiz.<\/p>\n
Bu rehberin sonunda, React’in temel prensiplerini kullanarak, yeniden kullan\u0131labilir ve klavye navigasyonuna sahip, ARIA standartlar\u0131na uygun bir Bir sekmeler bile\u015feni olu\u015ftururken g\u00f6z \u00f6n\u00fcnde bulundurmam\u0131z gereken birka\u00e7 temel prensip vard\u0131r:<\/p>\n 1. Bile\u015fen Modeli (Compound Component Pattern):<\/strong> Sekmeler genellikle \u00d6ncelikle, sekmeler bile\u015fenimizin durumunu ve gerekli fonksiyonlar\u0131 alt bile\u015fenlere aktarabilmek i\u00e7in bir React Context olu\u015fturaca\u011f\u0131z. Ard\u0131ndan, bu ba\u011flam\u0131 sa\u011flayacak ana A\u00e7\u0131klama:<\/strong><\/p>\n * \u015eimdi, sekmelerin ba\u015fl\u0131klar\u0131n\u0131 i\u00e7eren listeyi ve her bir sekme butonunu olu\u015fturaca\u011f\u0131z. Bu bile\u015fenler A\u00e7\u0131klama:<\/strong><\/p>\n * Son olarak, her bir sekmenin i\u00e7eri\u011fini bar\u0131nd\u0131racak A\u00e7\u0131klama:<\/strong><\/p>\n * T\u00fcm bile\u015fenlerimizi olu\u015fturduktan sonra, bunlar\u0131 Ad\u0131n\u0131z: John Doe<\/p>\n E-posta: john.doe@example.com<\/p>\n Bu sizin profil bilgilerinizin g\u00f6sterildi\u011fi aland\u0131r.<\/p>\n <\/TabPanel>\n\n Dil Se\u00e7imi: T\u00fcrk\u00e7e<\/p>\n Tema: Koyu<\/p>\n Ayarlar\u0131n\u0131z\u0131 buradan de\u011fi\u015ftirebilirsiniz.<\/p>\n <\/TabPanel>\n\n E-posta Bildirimleri: A\u00e7\u0131k<\/p>\n SMS Bildirimleri: Kapal\u0131<\/p>\n Bildirim ayarlar\u0131n\u0131z\u0131 y\u00f6netin.<\/p>\n <\/TabPanel>\n <\/div>\n <\/Tabs>\n\n Kullan\u0131m Notlar\u0131:<\/strong><\/p>\n * Bu temel yap\u0131y\u0131 kurduktan sonra, sekmeler bile\u015feninizin yeteneklerini geli\u015ftirmek i\u00e7in baz\u0131 ileri seviye konular\u0131 d\u00fc\u015f\u00fcnebilirsiniz:<\/p>\n * Animasyonlar:<\/strong> Sekmeler aras\u0131nda ge\u00e7i\u015f yaparken daha ak\u0131c\u0131 bir deneyim i\u00e7in CSS ge\u00e7i\u015fleri (transitions) veya animasyon k\u00fct\u00fcphaneleri (\u00f6rne\u011fin, Bu rehberde, React’in temel prensiplerini, Context API’sini ve 1. Neden ARIA nitelikleri kullanmal\u0131y\u0131z?<\/strong> 2. Her tab i\u00e7eri\u011fini render etmek performans\u0131 etkiler mi?<\/strong> 3. Tab bile\u015fenini nas\u0131l stilize edebilirim?<\/strong> 4. Tab i\u00e7eri\u011fini d\u0131\u015far\u0131dan (API’den) nas\u0131l y\u00fckleyebilirim?<\/strong> 5. Hangi durumlarda tab yerine ba\u015fka bir UI eleman\u0131 tercih etmeliyim?<\/strong> Unutmay\u0131n, en iyi UI eleman\u0131n\u0131 se\u00e7mek her zaman kullan\u0131c\u0131 ihtiya\u00e7lar\u0131n\u0131 ve i\u00e7erik yap\u0131s\u0131n\u0131 anlamaktan ge\u00e7er.<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React ile Sekmeler (Tabs) Bile\u015feni Nas\u0131l Olu\u015fturulur?\nModern web uygulamalar\u0131nda kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) tasar\u0131m\u0131n\u0131n temel ta\u015flar\u0131ndan","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":[128],"tags":[],"class_list":{"0":"post-34007","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nTabs<\/code> bile\u015feni in\u015fa etmi\u015f olacaks\u0131n\u0131z.<\/p>\nTab Bile\u015feninin Temel Prensipleri<\/h2>\n
Tabs<\/code>, TabList<\/code>, Tab<\/code> ve TabPanel<\/code> gibi birden fazla i\u00e7 i\u00e7e ge\u00e7mi\u015f bile\u015fenden olu\u015fur. Bu bile\u015fenlerin birbirleriyle nas\u0131l ileti\u015fim kurdu\u011funu y\u00f6netmek i\u00e7in React’in Context API’sini kullanarak bir “bile\u015fik bile\u015fen” (compound component) yap\u0131s\u0131 olu\u015fturaca\u011f\u0131z. Bu sayede, Tabs<\/code> bile\u015feni d\u0131\u015far\u0131dan esnek bir \u015fekilde kullan\u0131labilirken, i\u00e7 mant\u0131\u011f\u0131n\u0131 kendi i\u00e7inde tutacakt\u0131r.
\n2. Eri\u015filebilirlik (Accessibility – ARIA):<\/strong> Sekmeler, klavye ile gezinme ve ekran okuyucu kullan\u0131c\u0131lar\u0131 i\u00e7in tam eri\u015filebilir olmal\u0131d\u0131r. Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri (WCAG) ve WAI-ARIA standartlar\u0131na uygun olarak role<\/code>, aria-selected<\/code>, aria-controls<\/code>, aria-labelledby<\/code> ve tabIndex<\/code> gibi nitelikleri kullanaca\u011f\u0131z. Klavye ile sa\u011f\/sol ok tu\u015flar\u0131yla sekmeler aras\u0131nda ge\u00e7i\u015f yapabilme \u00f6zelli\u011fi de bu kapsamda ele al\u0131nacakt\u0131r.
\n3. Durum Y\u00f6netimi (State Management):<\/strong> Hangi sekmenin aktif oldu\u011funu ve hangi panelin g\u00f6r\u00fcn\u00fcr olmas\u0131 gerekti\u011fini y\u00f6netmek i\u00e7in React’in useState<\/code> hook’unu kullanaca\u011f\u0131z. Bu durum, Tabs<\/code> ana bile\u015feninde tutulacak ve Context API arac\u0131l\u0131\u011f\u0131yla alt bile\u015fenlere aktar\u0131lacakt\u0131r.<\/p>\nAd\u0131m 1: Ba\u011flam Olu\u015fturma ve Ana
Tabs<\/code> Bile\u015feni<\/h2>\nTabs<\/code> bile\u015fenini in\u015fa edece\u011fiz.<\/p>\n\/\/ src\/components\/Tabs.jsx\nimport React, { createContext, useState, useContext, useId, useMemo, useCallback } from 'react';\n\n\/\/ 1. Sekmeler Ba\u011flam\u0131n\u0131 Olu\u015fturma\nconst TabsContext = createContext(null);\n\n\/\/ 2. Ana Tabs Bile\u015feni\nexport const Tabs = ({ children, defaultActiveTabId }) => {\n \/\/ Benzersiz ID'ler olu\u015fturmak i\u00e7in useId hook'unu kullan\u0131yoruz (React 18+)\n const tabsId = useId();\n const [activeTabId, setActiveTabId] = useState(defaultActiveTabId || null);\n\n \/\/ activeTabId de\u011fi\u015fti\u011finde alt bile\u015fenlere yeni bir de\u011fer ge\u00e7irmek i\u00e7in useMemo kullan\u0131yoruz.\n const contextValue = useMemo(() => ({\n activeTabId,\n setActiveTabId,\n tabsId, \/\/ Benzersiz bir kimlik sa\u011flamak i\u00e7in\n }), [activeTabId, tabsId]);\n\n return (\n createContext(null)<\/code>: TabsContext<\/code> ad\u0131nda bir ba\u011flam olu\u015ftururuz. Bu ba\u011flam, aktif sekme ID’sini ve bu ID’yi g\u00fcncelleyen fonksiyonu tutacakt\u0131r.
\n* Tabs<\/code> bile\u015feni:
\n * useId()<\/code>: React 18 ile gelen bu hook, t\u00fcm bile\u015fen a\u011fac\u0131nda benzersiz ID’ler olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Bu, \u00f6zellikle ARIA nitelikleri (aria-labelledby<\/code>, aria-controls<\/code>) i\u00e7in kritik \u00f6neme sahiptir.
\n * useState(defaultActiveTabId || null)<\/code>: Hangi sekmenin aktif oldu\u011funu tutan durum de\u011fi\u015fkenidir. defaultActiveTabId<\/code> prop’u ile ba\u015flang\u0131\u00e7 sekmesi belirlenebilir.
\n * useMemo(...)<\/code>: Ba\u011flam de\u011ferini optimize etmek i\u00e7in kullan\u0131l\u0131r. activeTabId<\/code> veya tabsId<\/code> de\u011fi\u015fmedi\u011fi s\u00fcrece contextValue<\/code> yeniden hesaplanmaz.
\n * TabsContext.Provider<\/code>: Olu\u015fturulan ba\u011flam de\u011ferini alt\u0131ndaki t\u00fcm bile\u015fenlere sa\u011flar.<\/p>\nAd\u0131m 2:
TabList<\/code> ve Tab<\/code> Bile\u015fenleri<\/h2>\nTabsContext<\/code>‘i kullanarak ana Tabs<\/code> bile\u015feninin durumuna eri\u015fecek ve onu g\u00fcncelleyecek.<\/p>\n\/\/ src\/components\/Tabs.jsx (devam)\n\/\/ ... (\u00fcstteki kodlar)\n\n\/\/ 3. TabList Bile\u015feni\nexport const TabList = ({ children }) => {\n const { tabsId } = useContext(TabsContext);\n if (tabsId === null) {\n throw new Error(\"TabList must be rendered inside a Tabs component.\");\n }\n return (\n ${tabsId}-${id}-tab<\/code>;\n const panelId = ${tabsId}-${id}-panel<\/code>;\n\n const handleClick = useCallback(() => {\n setActiveTabId(id);\n }, [id, setActiveTabId]);\n\n const handleKeyDown = useCallback((event) => {\n \/\/ Klavye navigasyonu (sa\u011f\/sol ok tu\u015flar\u0131)\n const tabList = event.currentTarget.closest('[role=\"tablist\"]');\n if (!tabList) return;\n\n const tabs = Array.from(tabList.querySelectorAll('[role=\"tab\"]'));\n const currentIndex = tabs.findIndex(tab => tab.id === tabId);\n\n if (event.key === 'ArrowRight') {\n const nextTab = tabs[(currentIndex + 1) % tabs.length];\n nextTab.focus();\n setActiveTabId(nextTab.dataset.tabId); \/\/ dataset.tabId'yi kullanaca\u011f\u0131z\n } else if (event.key === 'ArrowLeft') {\n const prevTab = tabs[(currentIndex - 1 + tabs.length) % tabs.length];\n prevTab.focus();\n setActiveTabId(prevTab.dataset.tabId);\n }\n }, [tabId, setActiveTabId]);\n\n return (\n TabList<\/code> bile\u015feni:
\n * useContext(TabsContext)<\/code> ile tabsId<\/code>‘yi al\u0131r.
\n * role=\"tablist\"<\/code>: Ekran okuyuculara bu eleman\u0131n bir sekmeler listesi oldu\u011funu bildirir.
\n * aria-orientation=\"horizontal\"<\/code>: Sekmelerin yatay d\u00fczende oldu\u011funu belirtir (varsay\u0131lan de\u011ferdir ancak belirtmek iyidir).
\n* Tab<\/code> bile\u015feni:
\n * id<\/code> prop’u: Her sekmenin benzersiz bir kimli\u011fi olmal\u0131d\u0131r (\u00f6rne\u011fin, “profile”, “settings”).
\n * isSelected<\/code>: activeTabId<\/code> ile kendi id<\/code>‘sini kar\u015f\u0131la\u015ft\u0131rarak aktif olup olmad\u0131\u011f\u0131n\u0131 belirler.
\n * tabId<\/code>, panelId<\/code>: useId<\/code> ile olu\u015fturulan genel tabsId<\/code>‘yi kullanarak her sekme ve panel i\u00e7in benzersiz ve ili\u015fkili ID’ler olu\u015ftururuz.
\n * handleClick<\/code>: Sekmeye t\u0131kland\u0131\u011f\u0131nda setActiveTabId<\/code>‘yi \u00e7a\u011f\u0131rarak aktif sekmeyi g\u00fcnceller. useCallback<\/code> ile performans optimize edilir.
\n * handleKeyDown<\/code>: Klavye navigasyonunu sa\u011flar. Sa\u011f ve sol ok tu\u015flar\u0131na bas\u0131ld\u0131\u011f\u0131nda, s\u0131radaki veya \u00f6nceki sekmeye odaklan\u0131r ve aktif sekmeyi g\u00fcnceller.
\n * role=\"tab\"<\/code>: Ekran okuyuculara bu eleman\u0131n bir sekme oldu\u011funu bildirir.
\n * aria-selected={isSelected}<\/code>: Sekmenin se\u00e7ili olup olmad\u0131\u011f\u0131n\u0131 belirtir.
\n * aria-controls={panelId}<\/code>: Bu sekmenin hangi panelin i\u00e7eri\u011fini kontrol etti\u011fini belirtir.
\n * tabIndex={isSelected ? 0 : -1}<\/code>: Aktif sekmenin klavye ile eri\u015filebilir olmas\u0131n\u0131 (sekme tu\u015fu ile odaklan\u0131labilir), di\u011ferlerinin ise atlanmas\u0131n\u0131 sa\u011flar. Ok tu\u015flar\u0131 ile di\u011fer sekmelere ge\u00e7i\u015f yap\u0131labilir.
\n * data-tab-id={id}<\/code>: Klavye navigasyonu s\u0131ras\u0131nda kolayca id<\/code>‘ye eri\u015fmek i\u00e7in kullan\u0131l\u0131r.<\/p>\nAd\u0131m 3:
TabPanel<\/code> Bile\u015feni<\/h2>\nTabPanel<\/code> bile\u015fenini olu\u015fturaca\u011f\u0131z. Bu bile\u015fen de TabsContext<\/code>‘i kullanarak yaln\u0131zca aktif sekmenin i\u00e7eri\u011fini g\u00f6sterecektir.<\/p>\n\/\/ src\/components\/Tabs.jsx (devam)\n\/\/ ... (\u00fcstteki kodlar)\n\n\/\/ 5. TabPanel Bile\u015feni\nexport const TabPanel = ({ children, id, ...props }) => {\n const { activeTabId, tabsId } = useContext(TabsContext);\n if (tabsId === null) {\n throw new Error(\"TabPanel must be rendered inside a Tabs component.\");\n }\n\n const isSelected = activeTabId === id;\n const tabId = ${tabsId}-${id}-tab<\/code>;\n const panelId = ${tabsId}-${id}-panel<\/code>;\n\n return (\n TabPanel<\/code> bile\u015feni:
\n * id<\/code> prop’u: Ba\u011fl\u0131 oldu\u011fu Tab<\/code> bile\u015feni ile ayn\u0131 id<\/code>‘ye sahip olmal\u0131d\u0131r.
\n * isSelected<\/code>: activeTabId<\/code> ile kendi id<\/code>‘sini kar\u015f\u0131la\u015ft\u0131rarak aktif olup olmad\u0131\u011f\u0131n\u0131 belirler.
\n * role=\"tabpanel\"<\/code>: Ekran okuyuculara bu eleman\u0131n bir sekme paneli oldu\u011funu bildirir.
\n * id={panelId}<\/code>: Tab<\/code> bile\u015fenindeki aria-controls<\/code> ile e\u015fle\u015fen benzersiz bir ID sa\u011flar.
\n * aria-labelledby={tabId}<\/code>: Bu panelin hangi sekme ba\u015fl\u0131\u011f\u0131 taraf\u0131ndan etiketlendi\u011fini belirtir.
\n * hidden={!isSelected}<\/code>: Aktif olmayan panelleri HTML’in hidden<\/code> niteli\u011fi ile gizler. Bu, ekran okuyucular\u0131n da bu i\u00e7eri\u011fi g\u00f6rmesini engeller.
\n * {isSelected && children}<\/code>: Bu, performans optimizasyonu i\u00e7in iste\u011fe ba\u011fl\u0131 bir yakla\u015f\u0131md\u0131r. Yaln\u0131zca aktif sekme paneli render edildi\u011finde i\u00e7eri\u011fini olu\u015fturur. E\u011fer her zaman t\u00fcm panel i\u00e7eriklerinin DOM’da olmas\u0131n\u0131 isterseniz (\u00f6rne\u011fin, h\u0131zl\u0131 ge\u00e7i\u015fler i\u00e7in), bu ko\u015fulu kald\u0131rabilirsiniz.<\/p>\nAd\u0131m 4: Bile\u015fenleri Kullanma ve Stilize Etme<\/h2>\n
App.js<\/code> veya ba\u015fka bir \u00fcst bile\u015fen i\u00e7inde bir araya getirebiliriz. Basit bir stilizasyon da ekleyerek g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc iyile\u015ftirelim.<\/p>\n\/\/ src\/App.js\nimport React from 'react';\nimport { Tabs, TabList, Tab, TabPanel } from '.\/components\/Tabs'; \/\/ Tabs.jsx dosyas\u0131ndan import ediyoruz\nimport '.\/App.css'; \/\/ Stil dosyam\u0131z\u0131 ekleyelim\n\nfunction App() {\n return (\n Profil Bilgileri<\/h2>\n
Uygulama Ayarlar\u0131<\/h2>\n
Bildirim Tercihleri<\/h2>\n
\n\n Ba\u015fka Bir Tabs Bile\u015feni<\/h2>\n
\u00dcr\u00fcn Katalo\u011fu<\/h3>\n
\n
Hizmetlerimiz<\/h3>\n
\n
\/ src\/App.css <\/em>\/\nbody {\n font-family: Arial, sans-serif;\n margin: 20px;\n background-color: #f4f4f4;\n color: #333;\n}\n\n.App {\n max-width: 800px;\n margin: 0 auto;\n background-color: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nh1, h2, h3 {\n color: #0056b3;\n}\n\n.tabs-container {\n margin-bottom: 30px;\n}\n\n.tab-list {\n display: flex;\n border-bottom: 2px solid #ccc;\n margin-bottom: 15px;\n}\n\n.tab-button {\n padding: 12px 20px;\n font-size: 16px;\n border: none;\n background-color: transparent;\n cursor: pointer;\n outline: none;\n transition: all 0.3s ease;\n color: #555;\n border-bottom: 2px solid transparent; \/ Varsay\u0131lan olarak \u015feffaf <\/em>\/\n}\n\n.tab-button:hover {\n background-color: #e0e0e0;\n}\n\n.tab-button.active {\n color: #0056b3;\n border-bottom: 2px solid #0056b3;\n font-weight: bold;\n}\n\n.tab-button:focus {\n box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.5);\n border-radius: 4px 4px 0 0;\n}\n\n.tab-content-wrapper {\n padding: 15px;\n border: 1px solid #eee;\n border-top: none;\n border-radius: 0 0 8px 8px;\n background-color: #fcfcfc;\n}\n\n.tab-panel h2, .tab-panel h3 {\n margin-top: 0;\n color: #333;\n}\n\n.tab-panel p {\n line-height: 1.6;\n}\n\n.tab-panel ul {\n list-style-type: disc;\n margin-left: 20px;\n}<\/code><\/pre>\nTabs<\/code> bile\u015fenine defaultActiveTabId<\/code> prop’u ile ba\u015flang\u0131\u00e7ta hangi sekmenin aktif olaca\u011f\u0131n\u0131 belirtebilirsiniz.
\n* Her Tab<\/code> ve TabPanel<\/code> bile\u015feninin ayn\u0131 id<\/code> prop’una sahip olmas\u0131 gerekti\u011fini unutmay\u0131n. Bu, ARIA niteliklerinin do\u011fru \u00e7al\u0131\u015fmas\u0131 i\u00e7in kritik \u00f6neme sahiptir.
\n* Yukar\u0131daki \u00f6rnekte iki farkl\u0131 Tabs<\/code> bile\u015feni kullan\u0131lm\u0131\u015ft\u0131r. useId<\/code> hook’u sayesinde her bir Tabs<\/code> bile\u015feni kendi i\u00e7indeki sekmeler i\u00e7in benzersiz ID’ler \u00fcretecek ve \u00e7ak\u0131\u015fma ya\u015fanmayacakt\u0131r.<\/p>\nPratik \u0130pu\u00e7lar\u0131 ve \u0130leri Seviye Konular<\/h2>\n
Framer Motion<\/code>, React Spring<\/code>) kullanabilirsiniz.
\n* Lazy Loading (Tembel Y\u00fckleme):<\/strong> E\u011fer sekme panelleri \u00e7ok fazla veya a\u011f\u0131r i\u00e7erik bar\u0131nd\u0131r\u0131yorsa, TabPanel<\/code> bile\u015fenindeki {isSelected && children}<\/code> ko\u015fulunu kullanarak sadece aktif sekmenin i\u00e7eri\u011fini DOM’a y\u00fckleyebilirsiniz. Bu, \u00f6zellikle ilk y\u00fckleme s\u00fcresini ve bellek kullan\u0131m\u0131n\u0131 azaltabilir.
\n* URL Entegrasyonu:<\/strong> Sekme durumunu URL’deki hash (#<\/code>) ile senkronize edebilirsiniz. B\u00f6ylece kullan\u0131c\u0131lar belirli bir sekme a\u00e7\u0131kken sayfay\u0131 yenileyebilir veya ba\u015fkalar\u0131yla payla\u015fabilir. Bu, useEffect<\/code> ve window.location.hash<\/code> kullan\u0131larak yap\u0131labilir.
\n* Customization (\u00d6zelle\u015ftirme):<\/strong> Bile\u015feninizi daha da esnek hale getirmek i\u00e7in render props<\/code> veya daha geli\u015fmi\u015f bir compound component<\/code> deseni kullanabilirsiniz. \u00d6rne\u011fin, Tab<\/code> ve TabPanel<\/code>‘in render etti\u011fi HTML elemanlar\u0131n\u0131 (div, button, a) prop olarak almak gibi.
\n* Performans Optimizasyonu:<\/strong> React.memo<\/code> kullanarak Tab<\/code> veya TabPanel<\/code> gibi bile\u015fenlerin gereksiz yere yeniden render edilmesini engelleyebilirsiniz, \u00f6zellikle \u00e7ok say\u0131da sekmeniz varsa faydal\u0131 olabilir.<\/p>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n
useState<\/code>, useId<\/code>, useCallback<\/code>, useMemo<\/code> gibi hook’lar\u0131n\u0131 kullanarak eri\u015filebilir ve yeniden kullan\u0131labilir bir sekmeler bile\u015feni olu\u015fturmay\u0131 \u00f6\u011frendik. Compound component deseni sayesinde, bile\u015fenimiz hem g\u00fc\u00e7l\u00fc hem de d\u0131\u015far\u0131dan kolayca yap\u0131land\u0131r\u0131labilir hale geldi. Eri\u015filebilirlik odakl\u0131 yakla\u015f\u0131m\u0131m\u0131zla, her kullan\u0131c\u0131n\u0131n bu bile\u015feni sorunsuz bir \u015fekilde kullanabilmesini sa\u011flad\u0131k.<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\nARIA (Accessible Rich Internet Applications) nitelikleri, web i\u00e7eriklerini ve uygulamalar\u0131n\u0131 engelli ki\u015filerin daha eri\u015filebilir hale getirmek i\u00e7in kullan\u0131l\u0131r. Ekran okuyucular gibi yard\u0131mc\u0131 teknolojiler, bu nitelikleri kullanarak bir UI eleman\u0131n\u0131n amac\u0131n\u0131, durumunu ve \u00f6zelliklerini kullan\u0131c\u0131ya iletir. Sekmeler gibi dinamik UI bile\u015fenlerinde, ARIA nitelikleri olmadan ekran okuyucu kullan\u0131c\u0131lar\u0131 hangi sekmenin se\u00e7ili oldu\u011funu, hangi i\u00e7eri\u011fin g\u00f6sterildi\u011fini veya sekmeler aras\u0131nda nas\u0131l gezineceklerini anlamakta zorlanabilirler.<\/p>\n
\nEvet, e\u011fer t\u00fcm sekme panellerinin i\u00e7eri\u011fi DOM’da her zaman mevcutsa, bu \u00f6zellikle \u00e7ok say\u0131da sekmeniz veya her panelde \u00e7ok karma\u015f\u0131k\/a\u011f\u0131r i\u00e7erik varsa performans\u0131 etkileyebilir. Bu durumda, TabPanel<\/code> i\u00e7inde {isSelected && children}<\/code> gibi ko\u015fullu renderlama yaparak sadece aktif sekmenin i\u00e7eri\u011fini DOM’a y\u00fcklemek (lazy loading) performans\u0131 art\u0131rabilir. Ancak, \u00e7ok s\u0131k sekme de\u011fi\u015ftiren kullan\u0131c\u0131lar i\u00e7in i\u00e7eriklerin an\u0131nda g\u00f6r\u00fcnmesi daha iyi bir deneyim sunabilir. Bu bir denge meselesidir ve uygulaman\u0131z\u0131n \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re karar verilmelidir.<\/p>\n
\nSekmeler bile\u015fenini CSS mod\u00fclleri, Styled Components, Emotion, Tailwind CSS veya plain CSS gibi \u00e7e\u015fitli y\u00f6ntemlerle stilize edebilirsiniz. Bu rehberde App.css<\/code> ile basit bir stilizasyon \u00f6rne\u011fi verilmi\u015ftir. \u00d6nemli olan, .tab-list<\/code>, .tab-button<\/code>, .tab-button.active<\/code>, .tab-panel<\/code> gibi s\u0131n\u0131flar kullanarak ilgili elemanlara stiller uygulamakt\u0131r.<\/p>\n
\nE\u011fer sekme i\u00e7eri\u011fi bir API’den geliyorsa, TabPanel<\/code> bile\u015feninizin i\u00e7inde useEffect<\/code> hook’unu kullanarak veri \u00e7ekme i\u015flemini ger\u00e7ekle\u015ftirebilirsiniz. useEffect<\/code> i\u00e7inde, activeTabId<\/code> de\u011fi\u015fti\u011finde (yani ilgili sekme aktif oldu\u011funda) API \u00e7a\u011fr\u0131s\u0131n\u0131 tetikleyebilir ve veriyi bile\u015fenin yerel durumuna kaydedebilirsiniz. Bu, “lazy loading” yakla\u015f\u0131m\u0131yla birle\u015ftirilerek yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda veri \u00e7ekilmesini sa\u011flar.<\/p>\n
\nSekmeler, birbirinden ba\u011f\u0131ms\u0131z ancak tematik olarak ili\u015fkili i\u00e7erik bloklar\u0131n\u0131 d\u00fczenlemek i\u00e7in idealdir. Ancak:
\n* E\u011fer i\u00e7erikler aras\u0131nda s\u0131k\u00e7a ge\u00e7i\u015f yap\u0131lmas\u0131 gerekiyorsa ve kullan\u0131c\u0131lar\u0131n t\u00fcm i\u00e7eri\u011fi ayn\u0131 anda g\u00f6rmesi faydal\u0131ysa, akordeon (accordion) veya do\u011frudan b\u00f6l\u00fcmler (sections) daha iyi olabilir.
\n* E\u011fer i\u00e7erikler \u00e7ok az ve tek bir ekranda kolayca s\u0131\u011fabiliyorsa, sekmeler gereksiz bir karma\u015f\u0131kl\u0131k yaratabilir.
\n* E\u011fer i\u00e7erikler hiyerar\u015fik bir yap\u0131ya sahipse, a\u011fa\u00e7 g\u00f6r\u00fcn\u00fcm\u00fc (tree view) veya navigasyon men\u00fcleri daha uygun olabilir.<\/p>\n