Treegrid ve Diğer Gelişmiş Kalıplar
En zor birleşik bileşenleri güvenle ele alın.
Treegrid ve Diğer Gelişmiş Kalıplar, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Entering Hard Mode
Some widgets are genuinely complex: treegrids, grids, and trees combine rows, columns, and expandable nodes all at once. 🌳
What a Treegrid Is
A treegrid is a grid whose rows can expand and collapse like a tree, perfect for a file browser with nested folders and columns of detail.
The Core Roles
Use role="treegrid" on the container, role="row" on each row, and role="gridcell" on the cells. The structure mirrors a real grid.
<div role="treegrid">
<div role="row">
<span role="gridcell">src</span>
</div>
</div>Expandable Rows
A row that can open carries aria-expanded, true when its children show and false when collapsed. Leaf rows omit it entirely.
<div role="row" aria-expanded="false"
aria-level="1">Folder</div>Depth With aria-level
Use aria-level to tell users how deep a row sits in the tree. Level 1 is the top, and each nested row counts one higher.
Two-Axis Movement
In a treegrid, arrow keys move on both axes: Up and Down change rows, while Left and Right move between cells or collapse and expand.
Expand and Collapse Keys
On a parent row, Right Arrow expands it and Left Arrow collapses it. This matches how desktop file trees have always worked.
One Tab Stop
The whole treegrid is a single tab stop. Roving tabindex moves the real focus among cells so the widget feels like one composite control.
Set Size and Position
For dynamic or virtualized rows, use aria-setsize and aria-posinset so users hear position counts even when not all rows are rendered.
Home, End, and Jumps
Advanced grids add Home and End to jump to the first or last cell, and Ctrl with Home or End to leap to the very start or end of the data.
Reach for the APG
These patterns are unforgiving, so follow the APG example closely and test with a real screen reader. Small mistakes break the whole widget.
Quick Check
You build a file browser where rows open to reveal nested rows inside a grid. Which role fits?
Recap
A treegrid blends grid and tree: rows with aria-expanded and aria-level, two-axis arrow keys, one tab stop via roving tabindex. Lean on the APG and test hard. ✅
Sıkça Sorulan Sorular
“Treegrid ve Diğer Gelişmiş Kalıplar” dersi ücretsiz mi?
Evet — “Treegrid ve Diğer Gelişmiş Kalıplar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Treegrid ve Diğer Gelişmiş Kalıplar” dersinde ne öğreneceğim?
En zor birleşik bileşenleri güvenle ele alın. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Treegrid ve Diğer Gelişmiş Kalıplar” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- APG'yi Okuma: Kalıplar, Tuşlar ve Örnekler
- Combobox ve Otomatik Tamamlamayı Doğru Oluşturma
- Menü, Menubar ve Menü Düğmesi
- Treegrid ve Diğer Gelişmiş Kalıplar