Componenti HowTo - Panoramica

Componenti di HowTo

"Istruzioni: componenti" sono una raccolta di componenti web che implementano un'interfaccia utente comune pattern. Lo scopo di queste implementazioni è di essere una risorsa formativa. Puoi leggere attentamente l'implementazione, densamente commentata di vari componenti e, si spera, di imparare da questi. Tieni presente che, in modo esplicito, NON una libreria di UI e NON deve essere utilizzato in produzione.

  • <howto-checkbox>: rappresenta un'opzione booleana in un modulo. Il tipo più comune di è un doppio tipo che consente all'utente di alternare tra due opzioni: selezionata e deselezionata.
  • <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 è illustrare le best practice per la scrittura di componenti solidi che siano accessibile, performante, gestibile e facile da stile. Ogni componente è indipendente, in modo da poterla usare come implementazione di riferimento.

Accessibilità

I componenti seguono attentamente le istruzioni di creazione ARIA pratiche, che costituisce una guida spiegare e mostrare ARIA, Accessible Rich Internet Application standard. Se non hai familiarità con ARIA, dai un'occhiata alla nostra introduzione WebFundamentals. Ogni componente è collegato alla sezione pertinente delle Pratiche di creazione. Mentre non strettamente necessario, ti consigliamo di leggere la sezione Esercitazioni prima di entrare nel codice.

Prestazioni

Nello sviluppo web, il termine "rendimento" può essere applicato a una moltitudine cose nuove. Nel contesto di <howto>, le prestazioni si riferiscono principalmente alle animazioni girare costantemente a 60 f/s, anche sui dispositivi mobili.

Flessibilità visiva

Per quanto possibile, ai componenti non viene applicato lo stile, ad eccezione del layout o per indicare su uno stato selezionato o attivo. allo scopo di mantenere l'implementazione flessibile dal punto di vista e concentrato. Non dedicando tempo alla decorazione, limitiamo il codice solo a ciò per far funzionare il componente. Se è necessario uno stile affinché il componente funzioni, lo stile viene contrassegnato con un commento spiegandone i motivi.

Codice gestibile

Come HowTo: Components è un riferimento dell'implementazione, abbiamo dedicato del tempo alla scrittura di testo in modo chiaro e ricco di commenti.

Non obiettivi

Essere una libreria / framework / toolkit

I componenti di <howto> non sono pubblicati su npm, bower o su qualsiasi altra piattaforma perché non sono pensati per essere usati in produzione. Per motivi di ordine, leggibile, stiamo utilizzando API JavaScript moderne e supportiamo browser che implementano gli standard dei componenti web. Tu sarà in grado di adattare il codice per soddisfare le tue esigenze dopo aver letto questi implementazioni.

Essere compatibile con le versioni precedenti

Il codice non deve essere utilizzato direttamente. Potremmo, e molto probabilmente lo faremo, cambiare drasticamente l'implementazione e l'API di qualsiasi elemento, se meglio scoperta dell'implementazione. Questa è una risorsa vivente di cui possiamo condividere, ed esplorare le best practice per la creazione di UI web.

Completa

Al momento non implementiamo (e probabilmente non lo faremo) implementare *tutti *i componenti che possono essere disponibili in WAI ARIA Authoring Practices. Tuttavia, riutilizzare i principi usati in altri componenti di <howto> dovrebbe consentire ai lettori di implementare qualsiasi componente che mancano.