Card компоненты

Card — это универсальный компонент интерфейса, который используется для группировки информации в визуально отделённый блок. В SvelteKit UI библиотеках Card реализуется как комбинация HTML-структуры, стилей и реактивных свойств, что позволяет создавать интерактивные и адаптивные интерфейсы.

Структура Card

Типичная структура Card включает следующие элементы:

  1. Контейнер – основной блок <div> с классом card, который задаёт границы, тень и отступы.
  2. Header – заголовок карточки, обычно <h2> или <h3>, может содержать иконки или кнопки действий.
  3. Content – основной контент, текст, изображения, списки или таблицы.
  4. Footer – нижняя часть карточки, часто включает кнопки действий или ссылки.

Пример базовой разметки в Svelte:

<script>
  export let title = "Заголовок карточки";
  export let content = "Основное содержание карточки";
  export let footer = "Дополнительная информация";
</script>

<div class="card">
  <div class="card-header">{title}</div>
  <div class="card-content">{content}</div>
  <div class="card-footer">{footer}</div>
</div>

Стилизация и темы

Card в UI библиотеках SvelteKit обычно поддерживает варианты и темы:

  • Стандартный (default) – базовая тень, мягкие границы, белый фон.
  • Outlined – только рамка, без тени.
  • Elevated – увеличенная тень, эффект подъёма.
  • Color variants – цветные карточки для визуального выделения (primary, secondary, success, danger).

Пример использования пропсов для вариантов:

<Card variant="outlined" color="primary">
  <div slot="header">Заголовок</div>
  <div slot="content">Текст содержимого</div>
  <div slot="footer">Подвал</div>
</Card>

Адаптивность

Карточки должны корректно отображаться на разных устройствах:

  • Flexbox или Grid – для расположения нескольких карточек в ряду.
  • Media queries – изменение размеров и отступов на мобильных.
  • Реактивные свойства Svelte – возможность менять содержимое и стиль динамически в зависимости от состояния приложения.

Пример реактивного изменения цвета карточки:

<script>
  import { onMount } from 'svelte';
  let status = "normal";

  function toggleStatus() {
    status = status === "normal" ? "highlighted" : "normal";
  }
</script>

<Card color={status === "highlighted" ? "success" : "default"}>
  <div slot="header">Статус: {status}</div>
  <button on:click={toggleStatus}>Сменить статус</button>
</Card>

Интерактивность и события

Card может содержать интерактивные элементы: кнопки, ссылки, выпадающие меню. В SvelteKit это реализуется через слоты и дочерние компоненты, а также через события:

  • on:click на карточке или на отдельных элементах.
  • Передача колбэков через пропсы для обработки действий пользователя.
  • Использование store для глобального состояния, если карточки обновляют данные динамически.

Комбинация с другими компонентами

Card часто используется вместе с:

  • Avatar – изображение пользователя или объекта.
  • Badge/Label – статус, категория или количество.
  • Button – действия внутри карточки.
  • List – список элементов внутри контента.

Пример комбинированной карточки:

<Card variant="elevated">
  <div slot="header">
    <Avatar src="/user.jpg" alt="Пользователь"/>
    Профиль пользователя
  </div>
  <div slot="content">
    <p>Описание пользователя или продукта.</p>
    <List items={['Пункт 1', 'Пункт 2', 'Пункт 3']}/>
  </div>
  <div slot="footer">
    <Button on:click={() => alert('Подробнее')}>Подробнее</Button>
  </div>
</Card>

Рекомендации по использованию

  • Минимизация вложенности – Card должна быть лёгкой и понятной, без излишнего количества внутренних контейнеров.
  • Контраст и читаемость – текст и фон карточки должны быть хорошо различимы.
  • Единый стиль – использовать один набор цветов и теней для всей коллекции карточек в приложении.
  • Доступность – добавлять aria-label и другие атрибуты для экранных читалок.

Преимущества использования Card

  • Чёткая визуальная группировка информации.
  • Универсальность: подходит для профилей, товаров, уведомлений.
  • Простая интеграция с динамическими данными благодаря реактивности Svelte.
  • Лёгкая кастомизация через пропсы, слоты и стили.

Карточки остаются одним из наиболее гибких компонентов интерфейса в SvelteKit UI библиотеках, позволяя создавать как простые блоки информации, так и сложные интерактивные панели.

Оглавление