İçerik haritası bileşeni oluşturma

Bu gönderide, kırıntı bileşenlerini oluşturmanın bir yolu hakkındaki düşüncemi paylaşmak istiyorum. Demoyu deneyin.

Videoyu tercih ederseniz, işte bu gönderinin bir YouTube versiyonu:

genel bakış #

A galeta unu bileşen, kullanıcının site hiyerarşisinde nerede olduğunu gösterir. İsim Hansel ve Gretelbazı karanlık ormanlarda arkalarına ekmek kırıntıları bırakan ve kırıntıları geriye doğru izleyerek evlerinin yolunu bulabilenler.

Bu gönderideki ekmek kırıntıları değil standart ekmek kırıntıları, ekmek kırıntısı gibiler. Kardeş sayfaları doğrudan navigasyona yerleştirerek ek işlevsellik sunarlar. &LTselect>çok katmanlı erişimi mümkün kılar.

Arka plan kullanıcı deneyimi #

Yukarıdaki bileşen demo videosunda, yer tutucu kategorileri video oyunu türleridir. Bu iz, aşağıdaki yolda gezinilerek oluşturulur: home » rpg » indie » on saleAşağıda gösterildiği gibi.

Bu içerik haritası bileşeni, kullanıcıların bu bilgi hiyerarşisinde hareket etmesini sağlamalıdır; hızlı ve doğru bir şekilde dallara atlama ve sayfaları seçme.

Bilgi mimarisi #

Koleksiyonlar ve öğeler açısından düşünmenin faydalı olduğunu düşünüyorum.

Koleksiyonlar #

Koleksiyon, aralarından seçim yapabileceğiniz bir seçenekler dizisidir. Bu yazının kırıntı prototipinin ana sayfasından, koleksiyonlar FPS, RPG, kavgacı, dungeon crawler, spor ve bulmacadır.

Öğeler #

Bir video oyunu bir öğedir ve belirli bir koleksiyon, başka bir koleksiyonu temsil ediyorsa bir öğe olabilir. Örneğin, RPG bir öğe ve geçerli bir koleksiyondur. Bu bir öğe olduğunda, kullanıcı o koleksiyon sayfasındadır. Örneğin, AAA, Indie ve Self Published ek alt kategorileri de dahil olmak üzere RPG oyunlarının bir listesini görüntüleyen RPG sayfasındadırlar.

Bilgisayar bilimi açısından, bu içerik haritası bileşeni bir çok boyutlu dizi:

const rawBreadcrumbData = {
"FPS": {...},
"RPG": {
"AAA": {...},
"indie": {
"new": {...},
"on sale": {...},
"under 5": {...},
},
"self published": {...},
},
"brawler": {...},
"dungeon crawler": {...},
"sports": {...},
"puzzle": {...},
}

Uygulamanız veya web siteniz, farklı bir çok boyutlu dizi oluşturan özel bilgi mimarisine (IA) sahip olacaktır, ancak umarım koleksiyon açılış sayfaları ve hiyerarşi geçişi kavramı, onu kırıntılarınıza da getirebilir.

Düzenler #

İşaretleme #

İyi bileşenler uygun HTML ile başlar. Bir sonraki bölümde, işaretleme seçimlerimi ve bunların genel bileşeni nasıl etkilediğini ele alacağım.

Karanlık ve aydınlık düzen #

meta name="color-scheme" content="dark light">

bu color-scheme Yukarıdaki snippet’teki meta etiketi, tarayıcıya bu sayfanın açık ve koyu tarayıcı stillerini istediğini bildirir. Örnek içerik haritaları, bu renk şemaları için herhangi bir CSS içermez ve bu nedenle içerik haritaları, tarayıcı tarafından sağlanan varsayılan renkleri kullanır.

Gezinme öğesi #

nav class="breadcrumbs" role="navigation">&LT/nav>

kullanılması uygundur. &LTnav> örtülü bir ARIA’ya sahip olan site gezintisi için öğe navigasyonun rolü. Test ederken, sahip olduğumu fark ettim role niteliği, bir ekran okuyucunun öğeyle etkileşim biçimini değiştirdi, aslında gezinme olarak duyurulmuştu ve ben de onu eklemeyi seçtim.

simgeler #

Bir sayfada bir simge tekrarlandığında, SVG &LTuse> öğesi, tanımlayabileceğiniz anlamına gelir path bir kez ve simgenin tüm örnekleri için kullanın. Bu, aynı yol bilgilerinin tekrarlanmasını önleyerek daha büyük belgelere ve potansiyel yol tutarsızlığına neden olur.

Bu tekniği kullanmak için sayfaya gizli bir SVG öğesi ekleyin ve simgeleri bir &LTsymbol> benzersiz bir kimliğe sahip öğe:

svg style="display: none;">
symbol id="icon-home">
title>A home icon&LT/title>
path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
&LT/symbol>
symbol id="icon-dropdown-arrow">
title>A down arrow&LT/title>
path d="M19 9l-7 7-7-7"/>
&LT/symbol>
&LT/svg>

Tarayıcı, SVG HTML’yi okur, simge bilgisini belleğe koyar ve sayfanın geri kalanında, simgenin ek kullanımları için kimliğe atıfta bulunmaya devam eder, örneğin:

svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
use href="#icon-home" />
&LT/svg>
svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
use href="#icon-dropdown-arrow" />
&LT/svg>

Minimum sayfa performansı etkisi ve esnek stil ile bir kez tanımlayın, istediğiniz kadar kullanın. Fark etme aria-hidden="true" SVG öğesine eklenir. Simgeler, yalnızca içeriği duyan kişiler için yararlı değildir, bu kullanıcılardan gizlenmeleri gereksiz gürültü eklemelerini engeller.

Bölünmüş bağlantı .crumb #

Geleneksel ekmek kırıntısı ile bu bileşendekilerin ayrıldığı yer burasıdır. Normalde, bu yalnızca bir &LTa> bağlantı, ancak gizlenmiş bir seçimle çapraz UX ekledim. bu .crumb sınıf, bağlantının ve simgenin düzenlenmesinden sorumludur; .crumbicon simgeyi ve seçili öğeyi birlikte istiflemekten sorumludur. Ben buna bölünmüş bağlantı adını verdim çünkü işlevleri bir bağlantıya çok benziyor. bölünmüş düğmeancak sayfa gezintisi için.

span class="crumb">
a href="#sub-collection-b">Category B&LT/a>
span class="crumbicon">
svg>...&LT/svg>
select class="disguised-select" title="Navigate to another category">
option>Category A&LT/option>
option selected>Category B&LT/option>
option>Category C&LT/option>
&LT/select>
&LT/span>
&LT/span>

Bir bağlantı ve bazı seçenekler özel bir şey değildir ancak basit bir içerik haritasına daha fazla işlevsellik katar. ekleme title için &LTselect> öğesi, ekran okuyucu kullanıcıları için yararlıdır ve onlara düğmenin eylemi hakkında bilgi verir. Ancak aynı yardımı herkese de sağlıyor, iPad’de önde ve ortada olduğunu göreceksiniz. Bir öznitelik, birçok kullanıcıya düğme bağlamı sağlar.

Seperatör süslemeleri #

span class="crumb-separator" aria-hidden="true">→&LT/span>

Ayırıcılar isteğe bağlıdır, yalnızca birini eklemek de harika çalışır (yukarıdaki videodaki üçüncü örneğe bakın). sonra her birine veririm aria-hidden="true" dekoratif olduklarından ve bir ekran okuyucunun duyurması gereken bir şey olmadığından.

bu gap Daha sonra ele alınan özellik, bunların aralığını basitleştirir.

stiller #

Renk kullanıldığı için sistem renkleriçoğunlukla stiller için boşluklar ve yığınlar!

Yerleşim yönü ve akışı #

Birincil gezinme öğesi nav.breadcrumbs çocukların kullanması için kapsamlı bir özel özellik ayarlar ve aksi takdirde yatay olarak dikey olarak hizalanmış bir düzen oluşturur. Bu, kırıntıların, ayırıcıların ve simgelerin hizalanmasını sağlar.

.breadcrumbs {
--nav-gap: 2ch;
display: flex;
align-items: center;
gap: var(--nav-gap);
padding: calc(var(--nav-gap) / 2);
}

Her biri .crumb ayrıca bir miktar boşlukla yatay olarak dikey olarak hizalanmış bir düzen oluşturur, ancak özellikle bağlantı alt öğelerini hedefler ve stili belirtir white-space: nowrap. Bu, çok satırlı olmalarını istemediğimiz için çok kelimeli kırıntılar için çok önemlidir. Bu yazının ilerleyen kısımlarında, bu yatay taşmayı işlemek için stiller ekleyeceğiz. white-space sebep olunan özelliktir.

.crumb {
display: inline-flex;
align-items: center;
gap: calc(var(--nav-gap) / 4);
& > a {
white-space: nowrap;
&[aria-current="page"] {
font-weight: bold;
}
}
}

aria-current="page" geçerli sayfa bağlantısının diğerlerinden öne çıkmasına yardımcı olmak için eklenir. Ekran okuyucu kullanıcıları, bağlantının mevcut sayfa için olduğunu net bir şekilde belirtmekle kalmayacak, aynı zamanda gören kullanıcıların benzer bir kullanıcı deneyimi yaşamasına yardımcı olmak için öğenin stilini görsel olarak belirledik.

bu .crumbicon bileşen, “neredeyse görünmez” bir SVG simgesini istiflemek için ızgarayı kullanır &LTselect> eleman.

.crumbicon {
  --crumbicon-size: 3ch;

  display: grid;
  grid: [stack] var(--crumbicon-size) / [stack] var(--crumbicon-size);
  place-items: center;

  & > * {
    grid-area: stack;
  }
}

bu &LTselect> öğe DOM’da sonuncudur, bu nedenle yığının üstünde ve etkileşimlidir. tarzı ekle opacity: .01 bu nedenle öğe hala kullanılabilir ve sonuç, simgenin şekline mükemmel şekilde uyan bir seçim kutusudur. Bu, bir ürünün görünümünü kişiselleştirmenin güzel bir yoludur. &LTselect> yerleşik işlevselliği korurken eleman.

.disguised-select {
inline-size: 100%;
block-size: 100%;
opacity: .01;
font-size: min(100%, 16px); /* Defaults to 16px; fixes iOS zoom */
}

taşma #

Ekmek kırıntıları çok uzun bir izi temsil edebilmelidir. Uygun olduğunda, olayların yatay olarak ekran dışına çıkmasına izin vermenin hayranıyım ve bu ekmek kırıntıları bileşeninin iyi nitelikli olduğunu hissettim.

.breadcrumbs {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-padding-inline: calc(var(--nav-gap) / 2);
& > .crumb:last-of-type {
scroll-snap-align: end;
}
@supports (-webkit-hyphens:none) { & {
scroll-snap-type: none;
}}
}

Taşma stilleri aşağıdaki UX’i ayarlar:

• Fazla kaydırma içeren yatay kaydırma.
• Yatay kaydırma dolgusu.
• Son kırıntıda bir kırılma noktası. Bu, sayfada ilk kırıntının yüklendiği ve göründüğü anlamına gelir.
• Yakalama noktasını, yatay kaydırma ve yakalama efekti kombinasyonlarıyla mücadele eden Safari’den kaldırır.

Medya sorguları #

Daha küçük görüntü alanları için ince bir ayar, “Giriş” etiketini gizleyip yalnızca simgeyi bırakmaktır:

TheComedicComedian (width ) {
.breadcrumbs .home-label {
display: none;
}
}

Ulaşılabilirlik #

Hareket #

Bu bileşende çok fazla hareket yoktur, ancak geçişi bir prefers-reduced-motion kontrol edin, istenmeyen hareketi önleyebiliriz.

TheComedicComedian (prefers-reduced-motion: no-preference) {
.crumbicon {
transition: box-shadow .2s ease;
}
}

Diğer stillerin hiçbirinin değişmesi gerekmez, fareyle üzerine gelme ve odaklanma efektleri harika ve anlamlıdır. transitionancak hareket uygunsa etkileşime ince bir geçiş ekleyeceğiz.

JavaScript #

İlk olarak, sitenizde veya uygulamanızda kullandığınız yönlendirici türü ne olursa olsun, bir kullanıcı kırıntıları değiştirdiğinde, URL’nin güncellenmesi ve kullanıcıya uygun sayfayı göstermesi gerekir. İkinci olarak, kullanıcı deneyimini normalleştirmek için, kullanıcılar yalnızca göz atarken beklenmeyen gezinmelerin olmadığından emin olun. &LTselect> seçenekler.

JavaScript tarafından ele alınması gereken iki kritik kullanıcı deneyimi önlemi: seçim değişti ve istekli &LTselect> olay tetikleme önlemeyi değiştirin.

A kullanımı nedeniyle istekli olay önleme gereklidir. &LTselect> eleman. Windows Edge’de ve muhtemelen diğer tarayıcılarda da, seçim changed kullanıcı klavye ile seçeneklere göz atarken olay tetiklenir. Bu nedenle, kullanıcı seçeneği yalnızca sözde seçtiğinden, örneğin bir fareyle üzerine gelme veya odaklanma gibi, ancak seçimi ile onaylamadığından, onu istekli olarak adlandırdım. enter veya bir click. İstekli olay, bu bileşen kategorisi değiştirme özelliğine erişilemez hale getirir, çünkü seçim kutusunun açılması ve bir öğeye göz atılması, kullanıcı daha hazır olmadan olayı başlatır ve sayfayı değiştirir.

Daha iyi &LTselect> değişen olay #

const crumbs = document.querySelectorAll('.breadcrumbs select')
const allowedKeys = new Set(['Tab', 'Enter', ' '])
const preventedKeys = new Set(['ArrowUp', 'ArrowDown'])
// watch crumbs for changes,
// ensures it's a full value change, not a user exploring options via keyboard
crumbs.forEach(nav => {
let ignoreChange = false
nav.addEventListener('change', e => {
if (ignoreChange) return
// it's actually changed!
})
nav.addEventListener('keydown', ({ key }) => {
if (preventedKeys.has(key))
ignoreChange = true
else if (allowedKeys.has(key))
ignoreChange = false
})
})

Bunun için strateji, her bilgisayarda klavye kapatma olaylarını izlemektir. &LTselect> öğesini seçin ve basılan tuşun gezinme onayı olup olmadığını belirleyin (Tab veya Enter) veya mekansal navigasyon (ArrowUp veya ArrowDown). Bu belirleme ile bileşen, olay için olay gerçekleştiğinde beklemeye veya gitmeye karar verebilir. &LTselect> eleman yangınları.

Çözüm #

Artık nasıl yaptığımı bildiğine göre, nasıl yapardın‽ 🙂

Yaklaşımlarımızı çeşitlendirelim ve web üzerinde oluşturmanın tüm yollarını öğrenelim. Bir demo oluşturun, beni tweetle bağlantılar ve onu aşağıdaki topluluk remiksleri bölümüne ekleyeceğim!

Topluluk remiksleri #