Paper и elevation

Paper — это базовый компонент для создания визуальных поверхностей в интерфейсе. Он моделирует физическую бумагу или карточку и служит контейнером для других элементов, позволяя задавать тени, отступы и скругления. В SvelteKit UI libs Paper играет ключевую роль в построении модульного дизайна с использованием концепции material design.

Основные свойства Paper

  • elevation — определяет уровень тени и глубину «подъёма» поверхности. Обычно принимает целые значения от 0 до 24.

    • 0 — отсутствие тени, плоская поверхность.
    • 1–3 — легкая тень, подходит для карточек в списках.
    • 4–8 — средний уровень тени, выделяет блок на фоне.
    • 9–24 — сильная тень, для модальных окон и всплывающих элементов. Пример использования:
    <Paper elevation={4}>
  <p>Содержимое карточки с умеренной тенью</p>
</Paper>

  • square — логическое значение, указывающее, нужно ли отключить скругления углов.

    <Paper square>
  <p>Карточка с прямыми углами</p>
</Paper>

  • variant — задает визуальный стиль:

    • "elevation" — стандартная тень по уровню elevation.
    • "outlined" — только рамка, без тени. Пример:
    <Paper variant="outlined">
  <p>Карточка с обводкой вместо тени</p>
</Paper>

Работа с elevation

Уровень elevation автоматически управляет интенсивностью тени и цветом фона. В SvelteKit UI libs используется концепция динамических теней, что позволяет адаптировать интерфейс под светлую и темную темы. Тень создается через комбинацию box-shadow, где высота смещения и размытие пропорциональны значению elevation.

Примеры визуального эффекта:

  • elevation={1}: легкая тень, почти незаметная, хорошо подходит для элементов списка.
  • elevation={8}: тень заметна, объект визуально «приподнят», создается акцент на элементе.
  • elevation={16}: используется для модальных окон и всплывающих панелей, требует внимания к контрасту с фоном.

Взаимодействие с другими компонентами

Paper часто комбинируется с Grid, Stack и Typography для создания комплексных интерфейсных блоков. Например, карточка продукта может состоять из Paper с elevation={6}, внутри которой расположены изображение, заголовок и кнопки действия.

<Paper elevation={6} class="p-4">
  <img src="product.jpg" alt="Продукт" class="w-full"/>
  <h3 class="mt-2 font-bold">Название продукта</h3>
  <button class="mt-4 btn-primary">Купить</button>
</Paper>

Адаптация для темной и светлой темы

Для светлой темы Paper по умолчанию имеет белый фон, а тени сероватые. В темной теме фон меняется на оттенок серого или темного, а тени становятся более мягкими и светлыми. SvelteKit UI libs поддерживает автоматическую подстройку:

<Paper elevation={4} class="dark:bg-gray-800 dark:shadow-lg">
  <p>Карточка с адаптацией под темную тему</p>
</Paper>

Практические рекомендации

  • Использовать минимальный уровень elevation для списков, чтобы не перегружать визуально интерфейс.
  • Выделять ключевые элементы через elevation={8–16}.
  • Комбинировать с variant=“outlined”, если нужно разграничить блоки без теней.
  • Скругление углов лучше оставлять по умолчанию, оно повышает визуальную мягкость интерфейса.

Эффективное использование Paper и elevation позволяет создавать иерархию элементов, улучшать восприятие интерфейса и управлять вниманием пользователя без сложных кастомных CSS.

Оглавление