Navegació
Moure's pel lloc fa servir un únic conjunt d'elements d'interfície que es reconfigura segons la pantalla, en comptes de diversos per separat. El mateix dock ocupa tot l'ample en un telèfon, és una píndola flotant en una tauleta i desapareix a l'escriptori, on pren el relleu la navegació superior.
Un sol conjunt de chrome, tres viewports
El viewport dona forma a la navegació més que a cap altra part del sistema. Els marcs de sota són la pàgina d'inici real renderitzada a l'amplada de cada banda, sigui quin sigui el dispositiu des d'on llegeixis això: el dock ocupa tot l'ample en un mòbil, flota com una píndola en una tauleta i deixa pas als enllaços de navegació superiors a escriptori.
Els marcs de sota són les pàgines reals renderitzades a amplades reals, sense scripts: per això sempre mostren el tema clar i no s'hi executa cap analítica.
Barra superior
Una barra fixa que porta el logotip i els controls d'utilitat (llengua, tema i cerca al blog). Fa 64 píxels d'alçada a l'escriptori, 60 en una tauleta i 56 en un telèfon. A l'escriptori també conté els tres enllaços de secció; per sota de 1280 aquests passen al dock.
Dock de pestanyes
La navegació principal per seccions a mòbil i tauleta: quatre pestanyes: Inici, Blog, Feina, Reservar trucada. És un únic element amb un punt de ruptura, no dos components. Els marcs de sota són la pàgina real retallada al dock: de vora a vora a 390 amb la pestanya activa només en text verd, i una píndola flotant a 768 on l'activa guanya un fons tintat. Quatre pestanyes és estructural; una cinquena no cabria a la retícula, i per això aquesta secció del sistema de disseny viu al peu.
Barra d'accions de lectura
En una pàgina de lectura, el dock se substitueix, no s'acompanya, per una barra d'accions contextual: un anell de progrés amb la secció actual obre el full de sumari, i després compartir i tornar amunt. Aquest és el component ReadingBar real, mostrat a mig article. Una barra alhora: chrome de navegació o chrome de lectura, mai tots dos.
Navegació de la documentació
La navegació d'aquesta secció segueix l'anatomia de l'article del blog en lloc d'inventar-ne una de pròpia: al mòbil la barra superior canvia el logo per un xebró de tornada a l'inici de Disseny amb un títol plegable, la barra de lectura substitueix el dock i el seu botó d'anell obre els continguts com un full inferior, i a escriptori els continguts queden fixats a la dreta com el ToC de l'article, ressaltant la secció on ets. El fil d'Ariadna anomena el grup, i la pàgina d'inici de la secció és l'índex.
Fil d’Ariadna
Un petit rastre en versaletes mono sobre el títol de la pàgina. Anomena llocs, mai la pàgina mateixa: això ho fa el títol de sota, així que el rastre acaba un nivell per sobre. Cada segment es talla amb punts suspensius, i els noms llargs de sèrie s’escurcen a l’origen (“React Native” passa a “RN”), de manera que el rastre no es pot partir en dues línies.
<Breadcrumb label="…" items={[{ label, href }, …]} />Apareix als articles (Blog i després la sèrie), a les pàgines d’etiquetes i sèries, i en aquesta documentació. Al mòbil conviu amb el xebró de la barra superior: el xebró et porta enrere, el rastre et diu on ets.
Peces menors
Quatre peces menors completen el conjunt de navegació. Una barra de progrés verda fixa de 3 píxels corona cada article i cada pàgina d’aquesta documentació. Un botó rodó de tornar amunt apareix flotant quan la pàgina és prou llarga. El feed del blog pagina amb enllaços numerats a escriptori i una única píndola de carregar-ne més al mòbil. I la pàgina 404 manté la mateixa veu: un 404 gran, una línia, i botons de contorn de tornada a Inici, Blog i Feina.
Quan utilitzar-ho
Fes
No facis
Fes
No facis
On es troba
Nav.astro (.nav), TabBar.astro, ReadingBar.astro i Footer.astro (.footer). El dock i la barra de lectura de dalt són aquests components renderitzats en viu; els marcs mostren la barra superior al seu lloc.