Кухня можливостей: як це зроблено

Кухня можливостей — навчальний проєкт: по екрану на кожну можливість HotLayout і до кожного коротка нотатка, як це зроблено. Відкрийте екран, виділяйте його частини в дереві й порівнюйте побачене з нотаткою. Ця сторінка — карта екранів і місць, куди дивитися.

Кухню можливостей ви отримуєте, скопіювавши її з галереї готових застосунків (Початок роботи). На відміну від решти готових застосунків вона не показує продукт: кожен екран — маленький урок із карткою пояснення зверху, що в дереві зветься Explanation card.

Екрани#

Рух і скло#

Відкрийте Motion & glass. У Sky with moving orbs кола Floating orb і Breathing orb мають Рух: Плавання й Дихання зі своїми Напрямок, Відстань, px, Цикл, мс і Затримка, мс. Полотно стоїть; відкрийте Показати над телефоном і ввімкніть Рух на полотні або скористайтеся вкладкою Прев’ю. Glass card має Розмиття тла, px у групі Скло свого розділу Стиль і напівпрозоре тло. Кнопка Open frosted sheet відкриває Frosted sheet — шар: його Розмиття під шаром розмиває всю сторінку під ним.

Щоб повторити: виділіть блок, відкрийте Рух унизу його панелі й оберіть Плавання; додайте Скло картці над картинкою.

Карусель#

Slides — Рядок; Dishes from data — Список із даних. Виділіть будь-який і відкрийте Карусель: Карток у полі зору, Наступна визирає на та Крапки. Список бере картки з даних, по дві.

Умови#

Balance card має Стани: нижче нуля вона червона й каже «Overdrawn», вище нуля — зелена. Діє перший стан, чия умова справдилася. Два слова статусу в ній вживають Видимість із протилежними умовами. Balance chips пишуть значення в дані, тож у прев’ю ви перемикаєте баланс і бачите, як картка міняється.

Список із даних#

Dishes — Список із даних з Джерело, Показувати лише та Групувати за. Шаблон Dish row (template) малюється для кожного запису; Group header (template) — друга дитина, що малює заголовок групи. Кожна плашка в Filter chips має дію Записати значення в поле, і список фільтрується за ним. Empty state показано За умовою: він з’являється, коли список порожній, — спробуйте плашку, в якій нічого немає.

Форми#

Form тримає чотири віджети, кожен з Куди пише в поле групи form.* і Обов'язкове (у перемикача його немає). Submit button має Вимкнена, доки обов'язкові поля не заповнені, тож оживає, лише коли є ім’я, план і умови. Тоді веде на Form sent.

Навігація#

Кожна кнопка має дію Перейти на екран. Як екран відкривається, вирішує сам екран: виділіть A sheet чи A dialog і подивіться на Як відкривається та Місце шару. A page відкривається сторінкою, зі стрілкою своєї шапки для повернення; повернутися може й кнопка з дією Повернутися назад. Три вкладки Bottom navigation вживають Перейти в розділ; вкладка Inbox має Крапка, коли є непрочитане, а Mark as read пише значення, що гасить крапку.

Живі значення#

Числа в Points card і Steps card мають Рости від нуля, коли показано та Плавно, коли дані змінюються. Countdown card — шаблон із чотирьох частин із форматом Частина відліку; Ring card — Кільце прогресу. Змініть сценарій, щоб побачити, як вони рахують.

Жести#

У Swipe card кнопка має Підтвердження — Провести, щоб підтвердити. Like card має дію Перемкнути прапорець і Дія при довгому натисканні, що відкриває шар Quick actions; стан показує, що вподобано. У Press feedback pair правий елемент має Відгук на дотик — Немає, тож піддається лише лівий.

Теми й токени#

У Themes & tokens немає нічого із власним кольором: лише назви токенів. Значення живуть у розділі Дизайн. Змініть тему екрана над полотном — і все зміниться одразу. Див. Тема.

Дані#

У кухні свій малий словник: kitchen.* (баланс, бали, кроки, кільце, дата завершення, прапорці), form.* для полів, ui.category для плашок і один список, dishes. Відкрийте список Сценарій над полотном і оберіть Налаштувати значення…: задайте kitchen.balance нижче нуля для червоної картки, kitchen.unread, щоб увімкнути крапку, і зробіть dishes Порожній. Усі стани кладуть їх поруч. Докладніше: Дані.