2025
2025
—
—
2026
2026
Дизайн-система Beeline
Дизайн-система Beeline
Боттомшит (шторка)
Боттомшит (шторка)
Компонент для веба в мобильной версии.
Компонент для веба в мобильной версии.
1 версия
1 версия
До появления слотов редактируемая зона менялась через локальные компоненты
До появления слотов редактируемая зона менялась через локальные компоненты
2 версия
2 версия
С введением слотов я отрефакторил имеющийся компонент и превратил редактируемый участок в слот
С введением слотов я отрефакторил имеющийся компонент и превратил редактируемый участок в слот
С введением слотов я отрефакторил имеющийся компонент и превратил редактируемый участок в слот
Строение компонента
Строение компонента
Безопасная зона
Безопасная зона
Параметр Absolute Height блокирует увеличение шторки в высоту, не давая ей превышать безопасную зону от верхнего края экрана до шторки. Она составляет 80 px для любого устройства.
Параметр Absolute Height блокирует увеличение шторки в высоту, не давая ей превышать безопасную зону от верхнего края экрана до шторки. Она составляет 80 px для любого устройства.
Хэдер шторки
Хэдер шторки
Это обязательный (его можно отключить в некоторых случаях) элемент шторки, который по умолчанию должен содержать заголовок и иконку закрытия шторки справа, так как закрыть шторку в вебе нельзя смахиванием или тапом за её пределами.
Это обязательный (его можно отключить в некоторых случаях) элемент шторки, который по умолчанию должен содержать заголовок и иконку закрытия шторки справа, так как закрыть шторку в вебе нельзя смахиванием или тапом за её пределами.
Подзаголовок добавляется по необходимости. Иконка слева может быть использована как шаг назад при наличии переходов внутри шторки, либо в других целях на усмотрение дизайнера.
Подзаголовок добавляется по необходимости. Иконка слева может быть использована как шаг назад при наличии переходов внутри шторки, либо в других целях на усмотрение дизайнера.
Разделитель также можно убрать или оставить исходя из целей и вкуса дизайнера.
Разделитель также можно убрать или оставить исходя из целей и вкуса дизайнера.
CTA-зона
CTA-зона
В большинстве случаев для шторки могут понадобиться 1 или 2 кнопки.
В большинстве случаев для шторки могут понадобиться 1 или 2 кнопки.
Для этих целей добавлены 3 вида расположения кнопок:
1. single — одна кнопка на всю ширину;
2. double — две кнопки в один ряд;
3. column — две кнопки друг над другом.
Для этих целей добавлены 3 вида расположения кнопок:
1. single — одна кнопка на всю ширину;
2. double — две кнопки в один ряд;
3. column — две кнопки друг над другом.
При необходимости на усмотрение дизайнера можно менять secondary и primary на другие кнопки.
При необходимости на усмотрение дизайнера можно менять secondary и primary на другие кнопки.
Тёмная тема
Тёмная тема
Примеры использования
Примеры использования
