Blocks
v1.0.0Added in 1.0.0
The home screen of a marketplace phone app: large title, search, story circles, quick actions, recommended ads, feed tabs and a tab bar.
Scroll and the large title "Home" hands over to a compact glass bar; the feed tabs stick under it. Pull down at the top (touch, or a trackpad scroll up) and the iOS spinner refreshes "For you" with a haptic tick and a fade. Tap the search field: the page swaps to your recent searches (tap one to search it again, x removes it, Clear all clears them), typing filters every ad by title and place, Enter saves the query and calls onSearch, Cancel or Escape closes the search. Tap a story circle to open its full-height sheet with three new ads and See all; the ring turns gray once seen (drag the handle down, tap outside, the close button or Escape to close). Quick action tiles and the bell are links with count badges. Swipe the recommended rail sideways, tap a heart to save an ad (shared between the rail and the feed). Switch For you, Nearby and Following by tapping, swiping the list sideways or with the arrow keys on the tabs; Load more shows the next page. The bottom tab bar hides while you scroll down and comes back on scroll up; Search focuses the search, Home scrolls back to the top and the raised Post button posts an ad. On a desktop the app is a centered 440px column on a gray backdrop.
npx wingo-ui@latest add mobile-app-homePro item: the CLI needs a Pro account. See plans