Nabigasyon

Isang chrome set, tatlong viewport

Ang nabigasyon ang bahagi ng system na pinakahinuhubog ng viewport. Ang mga frame sa ibaba ay ang totoong home page na ni-render sa lapad ng bawat band, anuman ang device na ginagamit mo sa pagbabasa nito: ang dock ay umaabot edge-to-edge sa phone, lumulutang bilang pill sa tablet, at napapalitan ng mga top nav link sa desktop.

Ang mga frame sa ibaba ay ang totoong mga page na ni-render sa totoong lapad, naka-off ang scripts: kaya palaging light theme ang ipinapakita nila at walang analytics na tumatakbo sa loob.

Top bar

Isang sticky bar na nagdadala ng logo at ng mga utility na kontrol (wika, tema, at paghahanap sa blog). Ito ay 64 pixel ang taas sa desktop, 60 sa tablet at 56 sa isang telepono. Sa desktop dinadala rin nito ang tatlong link ng seksyon; sa ibaba ng 1280 lumilipat ang mga iyon sa dock.

Tab dock

Ang pangunahing section navigation sa phone at tablet: apat na tab (Home, Blog, Work, Book a call). Iisang element ito na may isang breakpoint, hindi dalawang component. Ang mga frame sa ibaba ay ang tunay na page na naka-crop sa dock: edge-to-edge sa 390 kung saan green na teksto lang ang aktibong tab, at floating pill sa 768 kung saan may tinted na fill ang aktibo. Structural ang apat na tab; hindi kakasya ang panglima sa grid, kaya nasa footer ang design-system section na ito.

Reading action bar

Sa reading page, ang dock ay pinapalitan, hindi sinasamahan, ng isang contextual action bar: isang progress ring na may kasalukuyang seksyon na nagbubukas ng contents sheet, tapos share at back-to-top. Ito ang totoong ReadingBar component, ipinapakita sa kalagitnaan ng artikulo. Isang bar sa bawat pagkakataon: browse chrome o read chrome, hindi kailanman pareho.

Footer

Isang nakasentrong column sa bawat screen: ang mga link ng seksyon, isang flat na hilera ng mga social mark kasama ang RSS, at ang copyright. Walang logo, kailanman: dala na ito ng top bar. Ang live na footer ay nasa ibaba mismo ng page na ito.

Nabigasyon ng docs

Ang navigation ng section na ito ay sumusunod sa anatomy ng blog post sa halip na mag-imbento ng sarili: sa phone, pinapalitan ng top bar ang logo ng back chevron pabalik sa Design hub na may nagko-collapse na pamagat, pinapalitan ng reading action bar ang dock at binubuksan ng ring button nito ang contents bilang bottom sheet, at sa desktop naka-pin ang contents sa kanan bilang ToC ng artikulo, na hina-highlight ang section kung nasaan ka. Pinangangalanan ng breadcrumb ang grupo, at ang hub page ang index.

Breadcrumb

Isang maliit na mono-caps na trail sa itaas ng page title. Mga lugar ang pinapangalanan nito, hindi kailanman ang page mismo: ang title sa ibaba na ang bahala doon, kaya nagtatapos ang trail isang level pataas. Bawat segment ay pinuputol ng ellipsis, at ang mahahabang pangalan ng serye ay pinapaikli sa pinagmulan (“React Native” ay nagiging “RN”), kaya hindi kayang mag-wrap ng trail.

<Breadcrumb label="…" items={[{ label, href }, …]} />

Nasa mga artikulo ito (Blog, tapos ang serye), sa mga tag at series page, at sa docs na ito. Sa phone, katrabaho nito ang chevron ng top bar: ang chevron ang nagbabalik sa iyo, ang trail ang nagsasabi kung nasaan ka.

Maliliit na chrome

Apat na maliliit na piraso ang kumukumpleto sa navigation set. Isang fixed na 3-pixel na berdeng progress bar ang nasa itaas ng bawat artikulo at docs page. Isang round na back-to-top button ang lumulutang kapag sapat na ang haba ng page. Ang blog feed ay nagpa-page gamit ang mga numerong link sa desktop at iisang load-more pill sa phone. At ang 404 page ay may parehong boses: malaking 404, isang linya, at mga outline button pabalik sa Home, Blog at Work.

Kailan gagamitin

Kung saan ito matatagpuan

Nav.astro (.nav), TabBar.astro, ReadingBar.astro at Footer.astro (.footer). Ang dock at reading bar sa itaas ay ang mismong mga component na naka-render nang live; ipinapakita ng mga frame ang top bar sa lugar nito.