Layer Reveal

Раскоп: окно вскрывает слои, глубина равна веку или эпохе

Layer Reveal

Развивает: чтение стратиграфии (глубина равна возрасту). Атом исследовательский: он ничего не проверяет и оценки не ставит.

Ученик ведёт круглое окно по земле, оно снимает дёрн и показывает разрез. Под рисунком идёт справка про слой на текущей глубине: век, что нашли, насколько это надёжно. Кнопка вскрывает весь разрез сразу, слайдер меняет только глубину. Слой, о котором спорят, помечается tag: debate.

Демо

Использование

{{< atom type="layer-reveal" >}}
title: "Заголовок разреза"
intro: "Что делать ученику"
layers:
  - century: "XXI в."
    label: "Дневная поверхность"
    tag: fact
    find: "M -20 12 L 20 12"
    desc: "Что лежит в этом слое и откуда это известно"
  - century: "VIII в."
    label: "Материк, до города"
    tag: debate
    desc: "Почему про этот слой спорят"
{{< /atom >}}

Параметр	Тип	Описание
`title`	string	Заголовок над разрезом
`intro`	string	Строка о том, что делать
`stageLabel`	string	Описание поля для скринридера
`layers`	array	`{century, label, desc, tag, fill, find, accent}`, сверху вниз

Слои идут в порядке залегания: первый сверху. fill необязателен, без него берётся шаг платформенной палитры. find это путь SVG находки в координатах от центра слоя.

Домен: visual (lazy-load). Клавиатура: Tab на поле, стрелки двигают окно, Shift делает шаг крупнее.

Не берите этот атом, когда нужна проверка: порядок слоёв проверяет order-items или sorting. Если слои не связаны глубиной и это просто список, хватит текста с reveal. Без JavaScript блок пуст, поэтому ключевые слои описывайте и в тексте урока.