GridItem

GridItem — это компонент сетки в библиотеке Naive UI, который предназначен для размещения элементов внутри контейнера NGrid. Он служит для управления размером, положением и поведением отдельных ячеек в адаптивной сетке. GridItem работает в тесной связке с NGrid, inheriting контекст сетки и позволяя задавать гибкие настройки для различных разрешений экрана.

Импорт и базовое использование

Для начала необходимо импортировать компонент из библиотеки:

import { NGrid, NGridItem } from 'naive-ui'

Простейший пример размещения:

<NGrid cols="3" gap="16">
  <NGridItem>Элемент 1</NGridItem>
  <NGridItem>Элемент 2</NGridItem>
  <NGridItem>Элемент 3</NGridItem>
</NGrid>

Здесь:

  • cols="3" — задает количество колонок сетки.
  • gap="16" — устанавливает расстояние между элементами в пикселях.
  • Каждый NGridItem автоматически занимает одну ячейку в сетке.

Свойства GridItem

1. span

Позволяет элементу занимать несколько колонок. По умолчанию значение равно 1.

<NGrid cols="4" gap="12">
  <NGridItem span="2">Элемент большой</NGridItem>
  <NGridItem>Элемент маленький</NGridItem>
  <NGridItem>Элемент маленький</NGridItem>
</NGrid>

2. xSpan и ySpan

  • xSpan — количество колонок по горизонтали, которые элемент занимает.
  • ySpan — количество рядов по вертикали.
<NGrid cols="4" gap="16">
  <NGridItem xSpan="2" ySpan="2">Большой элемент</NGridItem>
  <NGridItem>Малый элемент</NGridItem>
  <NGridItem>Малый элемент</NGridItem>
</NGrid>

3. responsive

Свойство responsive позволяет задавать поведение элемента при изменении ширины экрана. Можно указать разные значения span или xSpan для разных брейкпоинтов.

<NGrid cols="12" gap="16">
  <NGridItem :responsive="{ xs: 12, sm: 6, md: 4 }">
    Адаптивный элемент
  </NGridItem>
</NGrid>

Здесь:

  • xs — очень маленькие экраны, элемент занимает все 12 колонок.
  • sm — маленькие экраны, занимает 6 колонок.
  • md — средние экраны, занимает 4 колонки.

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

GridItem может содержать вложенные сетки, что позволяет создавать сложные макеты.

<NGrid cols="3" gap="16">
  <NGridItem>
    <NGrid cols="2" gap="8">
      <NGridItem>Вложенный 1</NGridItem>
      <NGridItem>Вложенный 2</NGridItem>
    </NGrid>
  </NGridItem>
  <NGridItem>Элемент 2</NGridItem>
  <NGridItem>Элемент 3</NGridItem>
</NGrid>

Работа с выравниванием и отступами

  • align — вертикальное выравнивание содержимого: top, middle, bottom.
  • justify — горизонтальное выравнивание содержимого: start, center, end, space-around, space-between.
  • padding и margin можно применять как через CSS, так и через инлайн-стили:
<NGridItem style="padding: 16px; margin: 8px;">Элемент с отступами</NGridItem>

Сложные макеты с GridItem

Использование xSpan и ySpan совместно с responsive позволяет строить динамичные и адаптивные макеты без необходимости писать медиа-запросы вручную.

<NGrid cols="12" gap="16">
  <NGridItem xSpan="8" :responsive="{ sm: 12, md: 6 }">Главный контент</NGridItem>
  <NGridItem xSpan="4" :responsive="{ sm: 12, md: 6 }">Сайдбар</NGridItem>
</NGrid>

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

Итоговые советы по использованию

  • Использовать span для простого расширения элемента на несколько колонок.
  • xSpan и ySpan применяются для сложных макетов с управлением рядами и колонками.
  • responsive делает сетку полностью адаптивной без дополнительных CSS.
  • Вложенные NGrid позволяют комбинировать разные сеточные структуры для модульного дизайна.
  • Всегда учитывать gap и выравнивание, чтобы сетка выглядела аккуратно и гармонично.

Эти возможности делают GridItem в Naive UI мощным инструментом для построения как простых, так и сложных интерфейсов в современных веб-приложениях.

Оглавление