Componenti di HowTo
"Istruzioni: componenti" è una raccolta di componenti web che implementano pattern di UI comuni. Lo scopo di queste implementazioni è essere una risorsa didattica. Puoi leggere l'implementazione con commenti dettagliati dei diversi componenti e, auspicabilmente, imparare da loro. Tieni presente che NON si tratta esplicitamente di una libreria UI e che NON devono essere utilizzate in produzione.
Componenti
<howto-checkbox>: rappresenta un'opzione booleana in un modulo. Il tipo più comune di casella di controllo è di tipo duale, che consente all'utente di passare da una scelta all'altra, ovvero da selezionata a deselezionata.<howto-tabs>: limita i contenuti visibili dividendoli in più riquadri.<howto-tooltip>: un popup che mostra informazioni relative a un elemento quando l'elemento viene selezionato dalla tastiera o quando il mouse passa sopra l'elemento.
Obiettivi
Il nostro obiettivo è dimostrare le best practice per scrivere componenti solidi che siano accessibili, performanti, manutenibili e facili da stilare. Ogni componente è completamente autonomo e può essere utilizzato come implementazione di riferimento.
Accessibilità
I componenti rispettano scrupolosamente le best practice per la creazione di WAI ARIA, 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 Norme per gli autori. Anche se non è strettamente necessario, ti consigliamo di leggere la sezione delle pratiche di scrittura prima di addentrarti nel codice.
Prestazioni
Nello sviluppo web, il termine "rendimento" può essere applicato a una moltitudine di aspetti. Nel contesto di <howto>, il rendimento si riferisce principalmente alle animazioni
che vengono eseguite in modo coerente a 60 fps, anche sui dispositivi mobili.
Flessibilità visiva
Per quanto possibile, i componenti non sono stilizzati, tranne per il layout o per indicare un stato selezionato o attivo. In questo modo, l'implementazione rimane visivamente flessibile e mirata. Se non dedichiamo tempo alla decorazione, limitiamo il codice solo a ciò che è assolutamente necessario per il funzionamento del componente. Se è necessario un determinato stile per il funzionamento del componente, questo verrà contrassegnato con un commento che spiega il motivo.
Codice manutenibile
Poiché HowTo: Components è un'implementazione di riferimento, abbiamo dedicato più tempo alla scrittura di un codice leggibile e facilmente comprensibile, con commenti dettagliati.
Non-Goals
Essere una libreria, un framework o un toolkit
I componenti <howto> non vengono pubblicati su npm, Bower o su qualsiasi altra piattaforma
perché non sono pensati per essere utilizzati in produzione. Per ottenere 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 è consigliabile fare affidamento direttamente sul codice. Potremmo, e molto probabilmente lo faremo, modificare drasticamente l'implementazione e l'API di qualsiasi elemento se ne viene scoperta una migliore. Si tratta di una risorsa in continua evoluzione in cui possiamo condividere, esplorare e discutere le best practice per la creazione di UI web.
Essere completa
Al momento non implementiamo (e probabilmente non lo faremo) *tutti *i componenti che si trovano nelle pratiche di authoring WAI ARIA. Tuttavia, il riutilizzo dei principi utilizzati
in altri componenti <howto> dovrebbe consentire ai lettori di implementare eventuali componenti
mancanti.