Feature kitchen: how it is made

The Feature kitchen is a learning project: one screen per feature of HotLayout, each with a short note on how it is made. Open a screen, select its parts in the tree and compare what you see with what the note says. This page is a map of the screens and of the places to look.

You get the Feature kitchen by copying it from the gallery of ready apps (Getting started). Unlike the other ready apps it does not show a product: every screen is a small lesson with an explanation card at the top, called Explanation card in the tree.

The screens#

Motion and glass#

Open Motion & glass. In Sky with moving orbs, the circles Floating orb and Breathing orb have Motion: Float and Breathe, with their own Direction, Distance, px, Cycle, ms and Delay, ms. The canvas stands still; open Show above the phone and turn on Motion on canvas, or use the Preview tab. Glass card has Background blur, px in the Glass group of its Style, with a translucent background. The button Open frosted sheet opens Frosted sheet, a layer: its Blur under the layer blurs the whole page under it.

To repeat: select a block, open Motion at the bottom of its panel and choose Float; add Glass to a card over a picture.

Carousel#

Slides is a Row; Dishes from data is a Data list. Select either and open Carousel: Cards in view, Next card shows by and Dots. The list takes its cards from data, two at a time.

Conditions#

Balance card has States: below zero it is red and says “Overdrawn”, above zero it is green. The first state whose condition is true wins. The two status words in it use Visibility with opposite conditions. Balance chips write a value into the data, so you can switch the balance in the preview and see the card change.

List from data#

Dishes is a Data list with a Source, Show only and Group by. The template, Dish row (template), is drawn for every record; Group header (template) is the second child and draws the title of a group. Each chip in Filter chips has the action Write a value into a field, and the list filters by it. Empty state is Conditional: it appears when the list is empty — try the chip with nothing in it.

Forms#

Form holds four widgets, each with Writes to a field of the form.* group and Required (the switch has none). Submit button has Disabled until the required fields are filled, so it wakes up only when the name, the plan and the terms are there. Then it goes to Form sent.

Navigation#

Each button has the action Go to screen. The screen decides how it opens: select A sheet or A dialog and look at How it opens and Layer place. A page opens as a page, with the arrow of its app bar to go back; a button can go back too with Go back. The three tabs of Bottom navigation use Switch to a section; the Inbox tab has Dot when a message is unread, and Mark as read writes the value that turns the dot off.

Live values#

Numbers in Points card and Steps card have Grow from zero when shown and Animate changes from data. The Countdown card is a template of four parts with the format Countdown part; Ring card is a Progress ring. Change the scenario to watch them count.

Gestures#

In Swipe card the button has Confirmation set to Swipe to confirm. Like card has the action Toggle a flag and an Action on long press that opens the layer Quick actions; a state shows that it is liked. In Press feedback pair the right tile has Press feedback set to None, so only the left one gives way.

Themes and tokens#

Themes & tokens contains nothing with a color of its own: only token names. The values live in the Design section. Switch the screen theme above the canvas and everything changes at once. See Theme.

Data#

The kitchen has its own small dictionary: kitchen.* (balance, points, steps, the ring, the end date, flags), form.* for the fields, ui.category for the chips and one list, dishes. Open the Scenario list above the canvas and choose Configure values…: set kitchen.balance below zero for the red card, kitchen.unread to turn the dot on and dishes to Empty. All states puts them side by side. More: Data.