Componenti illustrativi
"HowTo: Componenti" è una raccolta di componenti web che implementano pattern UI comuni. Lo scopo di queste implementazioni è essere una risorsa didattica. Puoi leggere attentamente l'implementazione molto diffusa di diversi componenti e, si spera, imparare da loro. Tieni presente che NON sono esplicitamente 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 di tipo doppio, che consente all'utente di alternare tra due opzioni, selezionate e deselezionate.<howto-tabs>: limita i contenuti visibili separandoli in più riquadri.<howto-tooltip>: un popup che mostra informazioni relative a un elemento quando quest'ultimo riceve lo stato attivo della tastiera o il mouse vi passa sopra.
Obiettivi
Il nostro obiettivo è dimostrare le best practice per la scrittura di componenti solidi che siano accessibili, performanti, gestibili e facili da definire. Ogni componente è totalmente indipendente, quindi può fungere da implementazione di riferimento.
Accessibilità
I componenti seguono attentamente le pratiche di authoring WAI ARIA, che sono una guida per spiegare e mostrare ARIA, lo standard per le applicazioni accessibili Rich Internet. Se non conosci ARIA, dai un'occhiata alla nostra introduzione su WebFundamentals. Ogni componente rimanda alla sezione pertinente delle pratiche di creazione. Sebbene non sia strettamente necessario, ti consigliamo di leggere la sezione delle prove di creazione prima di approfondire il codice.
Esibizione
Nello sviluppo web, il termine "prestazioni" può essere applicato a una moltitudine di cose. Nel contesto di <howto>, per rendimento si intende principalmente animazioni
in esecuzione coerente a 60 f/s, anche sui dispositivi mobili.
Flessibilità visiva
Per quanto possibile, i componenti non hanno uno stile, ad eccezione del layout o di indicare uno stato selezionato o attivo. per mantenere un'implementazione visivamente flessibile e mirata. Non perdendo tempo in 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 sarà contrassegnato con un commento che ne spiega il motivo.
Codice gestibile
Poiché HowTo: Componenti è un'implementazione di riferimento, abbiamo dedicato più tempo alla scrittura di codice leggibile e facilmente comprensibile, con una mole di commenti.
Senza obiettivi
Essere una libreria / una struttura / un toolkit
I componenti di <howto> non sono pubblicati su npm, bower o su qualsiasi altra piattaforma
perché non sono destinati a essere utilizzati in produzione. Per motivi di codice conciso e leggibile, utilizziamo le moderne API JavaScript e supportiamo browser moderni che implementano gli standard dei componenti web. Potrai
adattare il codice alle tue esigenze dopo aver letto queste
implementazioni.
Essere compatibile con le versioni precedenti
Il codice non deve essere utilizzato direttamente. Potremmo e molto probabilmente modificheremo drasticamente l'implementazione e l'API di qualsiasi elemento nel caso in cui venga scoperta un'implementazione migliore. È una risorsa in cui possiamo condividere, esplorare e discutere delle best practice per la creazione di UI web.
Essere completa
Al momento non implementiamo (e probabilmente non implementeremo) *tutti *i componenti che si trovano
nelle pratiche di authoring ARIA di WAI. Tuttavia, il riutilizzo dei principi utilizzati in altri componenti di <howto> dovrebbe consentire ai lettori di implementare eventuali componenti mancanti.