Pensare a modi per risolvere un problema SIDENAV
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Nel contesto della sfida GUI di oggi, creiamo un'esperienza utente di navigazione laterale scorrevole e accessibile utilizzando CSS e JS. La barra di navigazione laterale funziona su diversi browser, dimensioni dello schermo e dispositivi di input. Fantastico, vero? Seguiamo queste istruzioni mentre impieghiamo griglia, trasformazioni, pseudo-classi e un po' di JavaScript per gestire questa esperienza utente.
@AdamArgyleInk risponderà ai tuoi commenti per i primi 30 minuti dopo il lancio della puntata. Contattaci qui, fai domande o invia il tuo codice.
Capitoli:
- 0:00 - Introduzione
- 0:30 - Panoramica della funzionalità di debug dell'angolo
- 2:25 - Griglia += Layout stack query supporti
- 3:42 - Transizione della trasformazione accessibile
- 4:22 - :pseudoclasse target
- 5:57 - UX tasto Esc
- 6:16 - Concentrazione sull'orchestrazione
- 6:49 - UX screen reader
- 7:56 - Outro e invito all'azione
Risorse:
Guarda altre sfide GUI → https://goo.gle/GUIchallenges
Abbonati agli sviluppatori di Google Chrome → http://goo.gl/LLLNvf
arrow_back Torna a tutte le puntate
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2021-01-21 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Mancano le informazioni di cui ho bisogno"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Troppo complicato/troppi passaggi"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Obsoleti"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema di traduzione"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema relativo a esempi/codice"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Altra"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Facile da capire"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Il problema è stato risolto"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Altra"
}]
{"lastModified": "Ultimo aggiornamento 2021-01-21 UTC."}
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2021-01-21 UTC."],[],[]]