Mga sheet at overlay

Sa touch, ang mga pagpipiliang magiging dropdown sa desktop ay dumadausdos pataas mula sa ibaba bilang isang sheet. Isang primitive ang bumubuhay sa contents menu, sa share menu at sa language picker.

Anatomya

Isang panel na bilog nang 20 pixel sa itaas, tinatakan ng isang 36-by-4 na grabber, sa ibabaw ng isang madilim na backdrop. Ang mga hanay ay 48 pixel ang taas para sa komportableng hinlalaki; ang aktibong hanay ay nagdadala ng banayad na berdeng tint. Dumadausdos ito papasok sa isang spring curve, kaya dumarating ito nang may kaunting bigat.

Ang mga hanay at grabber ng sheet, mula sa mga tunay na klase.
Nilalaman 8 seksyon
1Overview
2Ang dalawang antas
3Mga estado
4Nilalaman

Sa desktop

Ang parehong picker ay isang dropdown sa desktop, hindi isang sheet. Pareho ang pagpipilian; ang ibabaw lamang ang nagbabago para umangkop sa isang pointer at mas malaking screen. Ang full-screen media zoom ang tanging overlay na nananatiling pareho sa bawat device.

Kailan gagamitin

Gawin

1Overview
2Ang dalawang antas
3Mga estado
Gumamit ng sheet kapag ang isang touch user ay pumipili mula sa isang maikling listahan.

Huwag

1OK
2Cancel
Gumamit ng sheet para sa isang oo/hindi; iyon ay isang dialog.

Gawin

1Overview
Panatilihin ang mga hanay sa 48 pixel para malinis na dumapo ang hinlalaki.

Huwag

1Overview
2Ang dalawang antas
Paliitin ang mga hanay sa ibaba ng komportableng laki ng touch.

Gawin

I-render ang parehong pagpipilian bilang dropdown sa desktop.

Huwag

Bitagin ang mambabasa: ang pagpindot sa backdrop ay nagsasara ng sheet.

Kung saan ito matatagpuan

Ang pamilyang .post-sheet sa global.css: .post-sheet-panel, .post-sheet-grabber, .post-sheet-head, .post-sheet-list, na may .sheet-active sa kasalukuyang hanay.

Search palette

Ang blog search ang tanging overlay na hindi sheet o dropdown: nakagitnang command palette sa ibabaw ng blurred na backdrop, binubuksan mula sa top bar o gamit ang Cmd K, buong keyboard ang kontrol. Nag-aalok ito ng mga rekomendasyon at mga series at tag chip bago pa mag-type, hina-highlight ang mga tugma habang nagta-type, at pinapangalanan ang sarili nitong labasan. Sa pagitan ng 700 at 1279 pixels, hinihiram din ng language picker ang nakagitnang panel na anyo, sa halip na bottom sheet ng phone.

Consent

Ang cookie banner ay fixed bar na may tatlong pantay na pagpipilian — accept, decline, customise — at ang customise ay nagbubukas ng focus-trapped na preferences card na may iisang analytics toggle. Kasindali ng pag-accept ang pag-decline, at maaaring buksan muli ng privacy page ang desisyon anumang oras.