Карточки и layout

Компоненты карточек

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

  • Размеры и отступы: padding, margin, width, height. В большинстве библиотек предусмотрены предустановленные размеры (small, medium, large), которые можно комбинировать с кастомными стилями.
  • Тени и бордеры: свойство shadow определяет глубину тени, а borderRadius — скругление углов. Правильное использование создаёт визуальную иерархию элементов.
  • Фоновая заливка и темы: background может принимать как цветовую строку, так и ссылку на тему (light, dark), что обеспечивает единообразный стиль приложения.

Пример базовой карточки в SvelteKit UI:

<Card padding="medium" shadow="md" borderRadius="lg">
  <h3>Заголовок карточки</h3>
  <p>Описание или содержимое карточки.</p>
</Card>

Карточки часто включают вложенные элементы:

  • Header / Footer: позволяет выделять заголовок и подвал карточки, например, для кнопок действий.
  • Media: изображение или видео, размещённое сверху или сбоку карточки.
  • Actions: кнопки, ссылки или иконки взаимодействия с содержимым.
<Card padding="large" shadow="lg" borderRadius="xl">
  <CardHeader>
    <h4>Продукт недели</h4>
  </CardHeader>
  <CardMedia src="/images/product.png" alt="Продукт" />
  <CardContent>
    <p>Краткое описание продукта и его особенностей.</p>
  </CardContent>
  <CardActions>
    <Button variant="primary">Купить</Button>
    <Button variant="secondary">Подробнее</Button>
  </CardActions>
</Card>

Layout и сетка

SvelteKit UI библиотеки предоставляют гибкие инструменты для построения layout, обычно на основе Flexbox или CSS Grid. Основные концепции:

  • Контейнеры (Container) задают максимальную ширину и центрируют содержимое.
  • Row / Column или Grid компоненты помогают выстраивать элементы в строки и колонки.
  • Gap и spacing: управляют расстоянием между элементами без ручного использования margin.

Пример сетки карточек с использованием Grid:

<Grid columns="3" gap="large">
  <Card>Карточка 1</Card>
  <Card>Карточка 2</Card>
  <Card>Карточка 3</Card>
  <Card>Карточка 4</Card>
</Grid>

Адаптивность достигается с помощью медиазапросов или встроенных параметров responsive:

<Grid columns={{ sm: 1, md: 2, lg: 3 }} gap="medium">
  <Card>Карточка A</Card>
  <Card>Карточка B</Card>
  <Card>Карточка C</Card>
</Grid>

Комбинирование карточек и layout

Для сложных интерфейсов карточки объединяются в панели, секции или галереи. Основные практики:

  • Использовать Grid для галерей с одинаковыми размерами карточек.
  • Flexbox подходит для горизонтальных списков или лент.
  • Для динамического контента применяются each блоки SvelteKit:
<Grid columns="3" gap="medium">
  {#each products as product}
    <Card>
      <CardHeader>
        <h5>{product.name}</h5>
      </CardHeader>
      <CardMedia src={product.image} alt={product.name} />
      <CardContent>
        <p>{product.description}</p>
      </CardContent>
      <CardActions>
        <Button variant="primary">Купить</Button>
      </CardActions>
    </Card>
  {/each}
</Grid>

Взаимодействие с темами и состояниями

Карточки и layout в SvelteKit UI поддерживают темы и интерактивные состояния:

  • Hover и focus: добавление эффектов при наведении (hoverShadow, hoverScale) улучшает UX.
  • Темная/светлая тема: глобальные переменные темы (themeColor) позволяют менять фон, текст и тени без изменения компонентов вручную.
  • Анимация и переходы: встроенные transitions Svelte (fade, slide) можно применять к карточкам при появлении или смене контента.
<Card class="transition-transform hover:scale-105" shadow="md">
  <CardContent>
    <p>Карточка с анимацией при наведении</p>
  </CardContent>
</Card>

Практические советы по организации layout

  • Разделять структуру (Grid, Flex) и контент (Card, Media, Actions), чтобы легко изменять сетку без переписывания карточек.
  • Использовать константы для размеров и отступов, чтобы поддерживать единый стиль приложения.
  • Проверять адаптивность на всех основных разрешениях, используя responsive-параметры SvelteKit UI.

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

Оглавление