Row и Column для строк и колонок

Row и Column — это базовые компоненты сеточной системы Carbon Components Svelte, предназначенные для создания адаптивной верстки на основе гибкой сетки. Они обеспечивают контроль над расположением элементов внутри контейнера, позволяют задавать пропорции колонок, управлять отступами и выравниванием, обеспечивая согласованность дизайна с принципами Carbon Design System.

Основные принципы работы

Row служит контейнером для горизонтального распределения колонок. Все Column внутри Row располагаются в одной линии, и их ширина определяется либо пропорционально сетке, либо фиксированными значениями.

Column задает ширину элемента относительно доступного пространства внутри Row. Ширина может быть указана в виде числа от 1 до 16 (для 16-колоночной сетки по умолчанию) или в виде адаптивных значений для различных размеров экрана.

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

<script>
  import { Row, Column } from 'carbon-components-svelte';
</script>

<Row>
  <Column width="4">
    <div>Колонка 1</div>
  </Column>
  <Column width="8">
    <div>Колонка 2</div>
  </Column>
</Row>

В этом примере первая колонка занимает четверть ширины контейнера, а вторая — три четверти.

Свойства Row

  1. gap — задает промежутки между колонками. Может быть числом (в пикселях) или строковым значением (small, medium, large).
  2. align — управление вертикальным выравниванием колонок: start, center, end, stretch.
  3. justify — управление горизонтальным распределением колонок: start, center, end, space-between, space-around, space-evenly.
  4. condensed — логическое значение, которое уменьшает внутренние отступы для более плотного расположения элементов.

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

<Row gap="medium" justify="space-between">
  <Column width="4">
    <div>Левая колонка</div>
  </Column>
  <Column width="4">
    <div>Правая колонка</div>
  </Column>
</Row>

Свойства Column

  1. width — основной параметр, определяющий ширину колонки в сетке. Может принимать:

    • Числа (например, 4 для 4 колонок из 16)
    • Объект для адаптивных сеток: { sm: 8, md: 6, lg: 4 }

  2. offset — смещение колонки вправо на указанное количество колонок. Полезно для создания пустого пространства слева.

  3. align — вертикальное выравнивание содержимого внутри колонки.

Пример адаптивной колонки:

<Column width={{ sm: 16, md: 8, lg: 4 }} offset={{ md: 2 }}>
  <div>Адаптивная колонка</div>
</Column>

В данном примере колонка занимает всю ширину на маленьких экранах, половину ширины на средних и четверть на больших, при этом смещена на 2 колонки вправо на средних экранах.

Вложенные строки и колонки

Внутри Column можно использовать другой Row, создавая вложенные сетки, что позволяет строить сложные макеты без нарушения адаптивности.

Пример:

<Row>
  <Column width="8">
    <Row gap="small">
      <Column width="4"><div>Вложенная 1</div></Column>
      <Column width="4"><div>Вложенная 2</div></Column>
    </Row>
  </Column>
  <Column width="8">
    <div>Правая колонка</div>
  </Column>
</Row>

Вложенные строки автоматически наследуют настройки родительской сетки, при этом могут задаваться свои gap и justify.

Адаптивность и мобильные устройства

Система сеток Carbon Components Svelte построена с учетом mobile-first подхода, что означает:

  • Колонки по умолчанию занимают всю ширину на маленьких экранах.
  • Для управления шириной на различных размерах можно использовать объектные значения width и offset (см. выше).
  • Свойства align и justify также могут быть адаптивными, задавая разные значения для sm, md и lg.

Пример адаптивного выравнивания:

<Row justify={{ sm: 'center', md: 'start', lg: 'space-between' }}>
  <Column width="6"><div>Колонка 1</div></Column>
  <Column width="6"><div>Колонка 2</div></Column>
</Row>

Практические советы по использованию

  • Для сложных макетов необходимо планировать сетку заранее, чтобы избежать конфликтов ширины и отступов.
  • Использование вложенных Row и Column позволяет создавать гибкую компоновку без дублирования стилей.
  • gap лучше задавать через предопределенные значения (small, medium, large), чтобы сохранять единообразие интерфейса.
  • Адаптивные параметры помогают избежать медиа-запросов вручную, делая верстку более декларативной и читаемой.

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

Оглавление