Карточки

Карточки (cards) представляют собой универсальный компонент для отображения компактной информации, сочетая текст, изображения и действия. В экосистеме SvelteKit они реализуются с использованием различных UI-библиотек, таких как Svelte Material UI (SMUI), SvelteStrap, Flowbite Svelte или Carbon Components Svelte. Рассмотрим их детальную структуру и способы кастомизации.

Основная структура карточки

Стандартная карточка состоит из нескольких логических блоков:

  1. Контейнер карточки – корневой элемент, задающий размеры, границы, тень и фон.
  2. Заголовок – элемент для выделения названия или темы карточки.
  3. Контент – основной текст, описание или дополнительная информация.
  4. Изображение (опционально) – может занимать верхнюю часть карточки или быть фоновым.
  5. Действия – кнопки или ссылки для взаимодействия с карточкой.

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

<script>
  import { Card, CardBody, CardFooter } from 'flowbite-svelte';
</script>

<Card class="max-w-sm">
  <img src="/example.jpg" alt="Пример изображения" class="rounded-t-lg"/>
  <CardBody>
    <h5 class="text-xl font-bold">Заголовок карточки</h5>
    <p class="text-gray-700">Описание или контент карточки, который помогает пользователю понять назначение элемента.</p>
  </CardBody>
  <CardFooter>
    <button class="bg-blue-500 text-white px-4 py-2 rounded">Действие</button>
  </CardFooter>
</Card>

Ключевые моменты:

  • Использование CardBody и CardFooter структурирует контент.
  • Применение утилитарных классов TailwindCSS позволяет быстро настраивать внешний вид.
  • Изображение можно интегрировать через тег <img> или через CSS как фоновое изображение.

Варианты карточек

Горизонтальные карточки

Подходят для списков продуктов, новостей или профилей пользователей. Основная идея — разместить изображение и текст рядом.

<Card class="flex max-w-2xl">
  <img src="/avatar.png" alt="Аватар" class="w-1/3 rounded-l-lg"/>
  <CardBody class="flex-1 p-4">
    <h5 class="text-lg font-semibold">Имя пользователя</h5>
    <p>Описание профиля или краткая информация о пользователе.</p>
  </CardBody>
</Card>

Особенности:

  • Использование flex для горизонтальной компоновки.
  • Контент занимает оставшееся пространство через flex-1.
  • Поддержка адаптивности через медиазапросы Tailwind.

Карточки с эффектом наведения

Для интерактивных интерфейсов часто добавляют тени или трансформацию при наведении.

<Card class="max-w-sm hover:shadow-lg transform hover:scale-105 transition-all duration-300">
  <CardBody>
    <h5 class="font-bold text-lg">Карточка с эффектом</h5>
    <p>Плавное увеличение при наведении на карточку.</p>
  </CardBody>
</Card>

Ключевые моменты:

  • hover:shadow-lg добавляет тень при наведении.
  • transform hover:scale-105 увеличивает карточку на 5%.
  • transition-all duration-300 обеспечивает плавную анимацию.

Интеграция с динамическими данными

SvelteKit позволяет легко рендерить карточки на основе массивов данных через #each блоки:

<script>
  import { Card, CardBody } from 'flowbite-svelte';

  const products = [
    { id: 1, title: 'Продукт 1', description: 'Описание продукта 1', image: '/prod1.jpg' },
    { id: 2, title: 'Продукт 2', description: 'Описание продукта 2', image: '/prod2.jpg' }
  ];
</script>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  {#each products as product}
    <Card>
      <img src={product.image} alt={product.title} class="rounded-t-lg"/>
      <CardBody>
        <h5 class="text-lg font-bold">{product.title}</h5>
        <p>{product.description}</p>
      </CardBody>
    </Card>
  {/each}
</div>

Особенности:

  • Использование grid с Tailwind для адаптивного расположения.
  • Простой рендеринг массива объектов с #each.
  • Легкая кастомизация через пропсы карточек из UI-библиотеки.

Кастомизация внешнего вида

UI-библиотеки Svelte часто предоставляют пропсы для настройки:

  • Размер карточки (size, class с Tailwind)
  • Цвет фона (bg-gray-100, bg-white, bg-blue-50)
  • Тень и бордеры (shadow-md, rounded-lg, border)
  • Гибкая компоновка (flex, grid, gap)

Например, карточка с кастомной цветовой схемой:

<Card class="bg-gradient-to-r from-blue-400 to-purple-500 text-white shadow-xl rounded-xl">
  <CardBody>
    <h5 class="text-xl font-bold">Градиентная карточка</h5>
    <p>Можно использовать градиенты и кастомные цвета для выделения карточки.</p>
  </CardBody>
</Card>

Анимации и интерактивность

Для динамических интерфейсов карточки можно анимировать с помощью Svelte Transition:

<script>
  import { fly } from 'svelte/transition';
  import { Card, CardBody } from 'flowbite-svelte';
</script>

<Card in:fly={{ y: 50, duration: 400 }}>
  <CardBody>
    <h5 class="font-bold text-lg">Анимированная карточка</h5>
    <p>Карточка появляется с эффектом вылета снизу.</p>
  </CardBody>
</Card>

Особенности:

  • in:fly позволяет задавать направление, скорость и задержку.
  • Поддержка других переходов: fade, slide, scale.
  • Комбинирование с hover-эффектами для интерактивного UX.

Итог структуры

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

  • Четкое разделение контента: заголовок, тело, футер.
  • Использование утилитарных классов для адаптивности и стилей.
  • Анимации и hover-эффекты повышают интерактивность.
  • Динамическое рендеринг массива объектов через #each блоки.

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

Оглавление