"HowTo: Components" è una raccolta di componenti web che implementano pattern UI comuni. Lo scopo di queste implementazioni è quello di fungere da risorsa didattica. Puoi leggere l'implementazione ampiamente commentata dei diversi componenti e, si spera, imparare da questi. Tieni presente che NON sono una libreria UI e NON devono essere utilizzati in produzione.
Componenti
<howto-checkbox>: rappresenta un'opzione booleana in un modulo. Il tipo più comune di casella di controllo è quello doppio, che consente all'utente di passare da una scelta all'altra: selezionata e non selezionata.<howto-tabs>: limita i contenuti visibili separandoli in più riquadri.<howto-tooltip>: un popup che mostra informazioni relative a un elemento quando l'elemento riceve la selezione della tastiera o il mouse ci passa sopra.
Obiettivi
Il nostro obiettivo è mostrare le best practice per la scrittura di componenti solidi che siano accessibili, efficienti, gestibili e facili da personalizzare. Ogni componente è completamente autonomo, quindi può fungere da implementazione di riferimento.
Accessibilità
I componenti seguono da vicino le WAI ARIA Authoring Practices, una guida per spiegare e mostrare ARIA, lo standard Accessible Rich Internet Application. Se non hai familiarità con ARIA, consulta la nostra introduzione su WebFundamentals. Ogni componente rimanda alla sezione pertinente delle Authoring Practices. Anche se non è strettamente necessario, ti consigliamo di leggere la sezione Authoring Practices prima di approfondire il codice.
Prestazioni
Nello sviluppo web, il termine "prestazioni" può essere applicato a una moltitudine di
cose. Nel contesto di <howto>, le prestazioni si riferiscono principalmente alle animazioni che vengono eseguite costantemente a 60 f/s, anche sui dispositivi mobili.
Flessibilità visiva
Per quanto possibile, i componenti non hanno uno stile, ad eccezione del layout o per indicare uno stato selezionato o attivo. In questo modo, l'implementazione rimane visivamente flessibile e mirata. Non dedicando tempo alla decorazione, limitiamo il codice solo a ciò che è assolutamente necessario per far funzionare il componente. Se è necessario uno stile per il funzionamento del componente, lo stile verrà contrassegnato con un commento che ne spiega il motivo.
Codice gestibile
Poiché HowTo: Components è un'implementazione di riferimento, abbiamo dedicato più tempo alla scrittura di un codice leggibile e facilmente comprensibile, con molti commenti.
Non-goals
Essere una libreria/un framework/un toolkit
I componenti <howto> non vengono pubblicati su npm, bower o altre piattaforme perché non sono destinati all'uso in produzione. Per un codice conciso e leggibile, utilizziamo API JavaScript moderne e supportiamo browser moderni che implementano gli standard dei componenti web. Dopo aver letto queste implementazioni, potrai adattare il codice alle tue esigenze.
Essere compatibile con le versioni precedenti
Non fare affidamento direttamente sul codice. Potremmo, e molto probabilmente lo faremo, modificare drasticamente l'implementazione e l'API di qualsiasi elemento se viene scoperta un'implementazione migliore. Si tratta di una risorsa dinamica in cui possiamo condividere, esplorare e discutere le best practice per la creazione di UI web.
Sii esaustivo
Non implementiamo (e probabilmente non lo faremo) *tutti *i componenti che si possono trovare nelle WAI ARIA Authoring Practices. Tuttavia, il riutilizzo dei principi utilizzati in altri componenti <howto> dovrebbe consentire ai lettori di implementare eventuali componenti mancanti.