Компонент · рівень 3

Квіз

Покроковий діалог вузла 4.x: одне запитання на крок, смуга поступу, спокійний вихід будь-якої миті. Останній сірий екран продукту і єдиний ПОТІМ - за рішенням 2 у MVP ціль обирають шістьма плитками, а діалог це збагачена версія після запуску.

рівень 3design/system/components/quiz.cssвузол 4.x1 сірий екран1 кольоровий
Що цей файл НЕ малює

Сірий екран приніс 59 імен, яких система не мала. Тут оголошено 34. Решту 25 не намальовано вдруге - їх прочитано з драбини, і це головна робота компонента:

Сіре ім'яКуди пішлоЧому саме туди
.q-optradio.css, рядковий щабельшосте ім'я поруч із .co-opt, .pf-lang, .ac-cli
.tx .nm .sub.ot .otn .otdобличчя того самого щабля, а не шосте ім'я для нього
.q-pillradio.css, компактний щабельпіл, що обирає ЗНАЧЕННЯ, є радіо: «чип фільтрує ВИГЛЯД, радіо обирає ЗНАЧЕННЯ»
.mk.radio.co-radioкружечок у системі намальований один раз
.mk.check.cbквадрат і галочка теж
.qscproduct-card.cssтретій щабель поруч із .pcard і .pcard-l
.sv-row.field-grpполе, зварене з кнопкою, І Є цією композицією
.back .skip .next.btn--outline .btn--text .btn--accentтри кнопки системи; файл лише ставить їх на місце
.sr-live.vhbase.css уже ховає живу область

Слово стану - on, не sel. Скрипт сірого екрана пише .sel; усе, що в цій системі обирають, обирається через .on, і драбина відповідає лише на нього. Клас стану це поведінка, а не структура, тож кольорова копія бере слово системи. Це єдине місце, де два шари навмисно пишуть одне поняття по-різному.

Анатомія · крок вступу

Картка стоїть тут наживо, з усіма своїми оголошеннями. Видимий рівно один крок: .q-step це display:none, доки не отримає .on.

Крок 1 з 6✕ Просто відкрити каталог
Крок 1 з 6
Підбір за ціллю · без реєстрації

Підберіть спортивне харчування під свою ціль

Не впевнені, з чого почати? Дайте відповідь на кілька простих запитань - і ми зберемо зрозумілий, безпечний стартовий набір саме під вас. Спокійно, без тиску.

1Розкажіть про цільМаса, схуднення, відновлення, енергія, імунітет чи витривалість.
2Кілька уточненьДосвід, частота тренувань і обмеження (усе - за бажанням).
3Готовий набір3–5 товарів зі складом і дозуванням + «чому саме це».

Без реєстрації · 1 хвилина

Анатомія · запитання, піли й застереження

Рядок відповіді належить radio.css цілком; квіз додає до нього тільки плитку значка попереду. Крок 4 бере кілька відповідей, тож той самий рядок носить .cb замість .co-radio.

Крок 2 з 6✕ Просто відкрити каталог
Запитання 1 з 5

Яка ваша ціль?

Оберіть головне - від цього залежить базовий набір категорій.

Не обов'язково - можна пропустити.

Формат
Бюджет
⚠
Порадьтеся з лікарем

Якщо ви приймаєте ліки або маєте хронічне захворювання - перед початком прийому будь-яких добавок варто проконсультуватися з лікарем. Ми зберемо максимально консервативний і безпечний набір.

Це не медична порада. Stack не замінює консультацію лікаря.

Анатомія · результат

Єдиний крок, який просить ширшу картку: чотири компактні картки набору стають в один рядок від 620. Питає про це композиція, а не крок - :has() лишає рішення на картці, замість того щоб скрипт додавав клас ширини.

Крок 6 з 6✕ Просто відкрити каталог
Ваш результат

Ваш стартовий набір для набору маси

Набір масиНовачок3–4 тренування
Стартовий набір4 товари
Додати весь набір у кошик · 4 009 ₴ Переглянути всю колекцію
Зберегти набір на потім?
Надішлемо ваш набір на пошту - повернетесь до нього коли зручно.

Погоджуюсь отримувати добірку й новини Stack. Реєстрація не потрібна. Відписатися можна будь-коли.

Це не медична порада. Склад, дозування й сертифікат - на сторінці кожного товару.

Показати набір →
Коли вживати
Обмеження
Стани
Холостий контроль

Сторінка звіряє себе з файлом: 43 власних класи, і всі стоять вище наживо. .q-backdrop існує лише від 620 - на вужчому вікні його оголошення display:none, і це стан, а не пропуск.

Токени

Прочитані з quiz.css: 14 семантичних ролей і 35 примітивів. Список виводить node tools/roles.mjs quiz з самого файла, тож він не може розійтися з ним.

Семантичні ролі (14)Примітиви (35)
--bg-action --bg-notice --bg-page --bg-sunken --bg-track --elevation-4 --line-hair --line-notice --line-strong --text-action --text-body --text-muted --text-primary --text-secondary--container-text --dur-base --dur-fast --ease-standard --fs-10 --fs-12 --fs-14 --fs-16 --fs-18 --fs-20 --fs-24 --fw-black --fw-bold --fw-semibold --lh-snug --ls-caps --ls-lead --radius-12 --radius-16 --radius-4 --radius-8 --radius-circle --radius-pill --scrim-ink-10 --size-30 --size-38 --size-40 --size-52 --space-12 --space-16 --space-2 --space-24 --space-4 --space-40 --space-8