Mobile
v1.0.0Added in 1.0.0
An iOS large title that scrolls with the page and hands over to a compact title in a glass bar, with back, actions and search.
Scroll the page and the large title slides up with the content, fading as it passes under the bar; exactly when it disappears the compact title rises into the bar and the glass surface and hairline fade in, all following your finger. Let go halfway through the handover and it settles to fully expanded or fully collapsed. Pull past the top on a phone and the title stretches up to 8% from its corner. Tap the search field and the page scrolls so the field sits right under the bar, the Cancel button slides in from the end and the field makes room; type to filter, tap the clear button to empty it, tap Cancel (or press Escape) to clear, close the keyboard and return to the top. The back button (a link or a button, labelled with the previous page) and the trailing actions stay in the bar at 44px on touch. With the keyboard Tab goes back, actions, search, cancel; the title is the page's only <h1>, and when Escape or Cancel ends a search from the keyboard, focus returns to it instead of getting lost. Under reduced motion the handover is an instant switch and nothing stretches or slides.
npx wingo-ui@latest add large-title-headerPro item: the CLI needs a Pro account. See plans
3 unread