Карточки и контейнеры

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

Создание карточки

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

<script>
  import { Card, CardHeader, CardContent, CardFooter } from 'sveltekit-ui';
</script>

<Card class="w-80">
  <CardHeader>
    <h2>Заголовок карточки</h2>
  </CardHeader>
  <CardContent>
    <p>Краткое описание содержимого карточки. Здесь можно разместить текст, изображения или другие компоненты.</p>
  </CardContent>
  <CardFooter>
    <button class="btn-primary">Действие</button>
  </CardFooter>
</Card>

Особенности компонентов Card в SvelteKit UI:

  • CardHeader — содержит заголовки и вспомогательную информацию. Обычно используется для основного названия блока.
  • CardContent — основной контент: текст, изображения, списки, графика.
  • CardFooter — место для кнопок и действий, связанных с карточкой.

Стилизация и модификации

Карточки в SvelteKit UI поддерживают кастомизацию через классы и пропсы:

  • Размеры: можно управлять шириной и высотой через классы (w-64, h-40).
  • Тени и бордеры: добавляются через классы shadow-md, border, rounded-lg.
  • Цветовые темы: bg-white, bg-gray-100, text-gray-800 позволяют быстро изменять внешний вид.
<Card class="w-96 bg-gray-50 shadow-lg rounded-xl">
  <CardHeader>
    <h2 class="text-xl font-semibold">Карточка с темой</h2>
  </CardHeader>
  <CardContent>
    <p>Использование классов Tailwind позволяет легко менять стили карточек.</p>
  </CardContent>
</Card>

Контейнеры для группировки элементов

Компонент Container используется для организации макета страниц и управления пространством между элементами. Он обеспечивает выравнивание, отступы и адаптивное поведение на разных устройствах.

<script>
  import { Container } from 'sveltekit-ui';
</script>

<Container class="grid grid-cols-3 gap-4 p-4">
  <Card>
    <CardHeader><h3>Карточка 1</h3></CardHeader>
    <CardContent>Контент карточки 1</CardContent>
  </Card>
  <Card>
    <CardHeader><h3>Карточка 2</h3></CardHeader>
    <CardContent>Контент карточки 2</CardContent>
  </Card>
  <Card>
    <CardHeader><h3>Карточка 3</h3></CardHeader>
    <CardContent>Контент карточки 3</CardContent>
  </Card>
</Container>

Ключевые моменты при работе с контейнерами:

  • Использование сеток (grid, flex) позволяет создавать адаптивные макеты без сложной логики CSS.
  • gap регулирует расстояние между карточками или другими элементами.
  • Внутренние отступы (padding) обеспечивают визуальный комфорт и предотвращают слипание элементов.

Интерактивные карточки

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

<script>
  import { Card, CardContent } from 'sveltekit-ui';
  let liked = false;

  function toggleLike() {
    liked = !liked;
  }
</script>

<Card on:click={toggleLike} class="cursor-pointer">
  <CardContent>
    <p>{liked ? 'Вам понравилось!' : 'Нажмите, чтобы поставить лайк'}</p>
  </CardContent>
</Card>

Особенности интерактивных карточек:

  • Состояния (hover, active, selected) можно обрабатывать с помощью реактивных переменных.
  • Встроенные анимации и transitions помогают сделать интерфейс более живым и отзывчивым.
  • Комбинирование с кнопками и ссылками позволяет создавать полноценные элементы навигации или управления.

Адаптивность и мобильная оптимизация

Карточки и контейнеры автоматически подстраиваются под размеры экранов благодаря Tailwind-классам:

  • sm:w-full — ширина карточки на мобильных устройствах.
  • md:grid-cols-2 — количество колонок в контейнере на средних экранах.
  • lg:grid-cols-4 — сетка для больших экранов.
<Container class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 p-4">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</Container>

Вложенные карточки и компоновка

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

<Card class="w-96">
  <CardHeader><h2>Основная карточка</h2></CardHeader>
  <CardContent>
    <Container class="grid grid-cols-2 gap-2">
      <Card>Вложенная карточка 1</Card>
      <Card>Вложенная карточка 2</Card>
    </Container>
  </CardContent>
</Card>

Такой подход позволяет строить многоуровневые интерфейсы, где каждая карточка может содержать собственные элементы управления и контент.

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

  • Разделять контент на логические блоки, чтобы карточки оставались компактными.
  • Использовать контейнеры для согласованного выравнивания и адаптивности.
  • Добавлять интерактивность только там, где она нужна, чтобы не перегружать интерфейс.
  • Сочетать Tailwind-классы с компонентами SvelteKit UI для максимальной гибкости в дизайне.
Оглавление