Создаем идеальную трехсекционную панель в React с Mantine: просто, быстро, эффективно!

Узнайте, как с помощью TypeScript и Mantine Flex создать адаптивную панель, где боковые элементы занимают минимум места, а центральный — все остальное.

В современной веб-разработке часто возникает задача создания интерфейсных панелей, где элементы должны гибко распределять пространство. Классический пример: панель на всю ширину с тремя секциями — левая и правая занимают ровно столько места, сколько необходимо их содержимому (без переноса строк), а центральная секция заполняет все оставшееся доступное пространство. Реализовать такой макет лаконично и эффективно можно с помощью библиотеки Mantine в связке с React и TypeScript. Давайте разберемся, как это сделать!

Ключевые моменты решения

Mantine Flex: Это основной компонент из библиотеки Mantine, который мы будем использовать. Он построен на основе CSS Flexbox и предоставляет мощный, но простой API для создания гибких макетов без необходимости писать много CSS-кода вручную.
Точное управление шириной: Свойства flexShrink (для боковых элементов) и flexGrow (для центрального элемента) в сочетании с whiteSpace: 'nowrap' позволяют элементам занимать ровно столько места, сколько нужно, и корректно обрабатывать переполнение.
Лаконичность и читаемость: Предлагаемое решение использует минимальное количество кода и полагается на встроенные возможности Mantine (такие как sx prop для inline-стилизации), что делает код чистым, понятным и легко поддерживаемым.

Знакомство с инструментами: Mantine и компонент `Flex`

Mantine — это полнофункциональная библиотека React-компонентов и хуков, которая ставит во главу угла удобство использования, доступность и опыт разработчика. Она предлагает более 120 настраиваемых компонентов, полную совместимость с TypeScript и ориентирована на создание современных веб-приложений.

Для нашей задачи ключевым является компонент <Flex>. Он инкапсулирует возможности CSS Flexbox, позволяя легко создавать одномерные макеты (строки или столбцы). С его помощью мы можем управлять выравниванием, распределением пространства и порядком элементов внутри контейнера.

Пример интерфейса, созданного с использованием Mantine UI

Пример интерфейса, демонстрирующий возможности Mantine UI.

Создание трехэлементной панели: шаг за шагом

Для решения нашей задачи мы будем использовать компонент <Flex> как основной контейнер и три компонента <Text> в качестве его дочерних элементов. Конфигурация будет следующей:

1. Контейнер: Компонент `<Flex>`

Основной контейнер <Flex> будет настроен так, чтобы занимать 100% доступной ширины и выравнивать дочерние элементы по вертикали. Также мы добавим небольшой отступ между элементами для лучшей читаемости.

style={{ width: '100%' }}: Задает ширину контейнера равной 100% родительского элемента.
align="center": Выравнивает дочерние элементы по центру вертикальной оси.
gap="md": Устанавливает промежуток (gap) между дочерними элементами. Mantine использует предопределенные размеры отступов (xs, sm, md, lg, xl).

2. Боковые элементы (левый и правый): Точность в размерах

Первый (левый) и третий (правый) элементы должны занимать только необходимое им пространство, и их содержимое не должно переноситься на новую строку.

sx={{ whiteSpace: 'nowrap' }}: Это свойство CSS, примененное через prop sx, запрещает перенос текста на новую строку. Содержимое останется на одной линии.
sx={{ flexShrink: 0 }}: Это свойство Flexbox указывает, что элемент не должен сжиматься, даже если в контейнере недостаточно места. Он будет стараться сохранить свою исходную ширину, определяемую контентом.

3. Центральный элемент: Заполнение пространства

Второй (центральный) элемент должен растянуться, чтобы занять все оставшееся свободное пространство между левым и правым элементами.

sx={{ flexGrow: 1 }}: Это свойство Flexbox позволяет элементу расти и занимать доступное пространство в flex-контейнере. Значение 1 означает, что он заберет все свободное место после того, как другие элементы займут свое.
sx={{ overflow: 'hidden' }}: Если содержимое центрального элемента все же окажется слишком длинным даже после растягивания, это свойство скроет ту часть, которая не помещается.
truncate (prop компонента <Text>): Это удобный prop в Mantine, который автоматически применяет стили для обрезки текста и добавления многоточия (...), если текст не помещается в одну строку. Он включает в себя whiteSpace: 'nowrap', overflow: 'hidden' и textOverflow: 'ellipsis'.
sx={{ textAlign: 'center' }}: Опционально, для лучшего визуального представления, текст в центральном элементе можно выровнять по центру.

Код решения на TypeScript + React + Mantine

Ниже представлен полный код компонента панели. Он лаконичен, использует только компоненты и возможности Mantine, и полностью соответствует вашему запросу.


import React from 'react';
import { Flex, Text } from '@mantine/core';

// Для наглядности можно добавить временные стили контейнеру
// const panelContainerStyle: React.CSSProperties = {
//   border: '1px dashed #999',
//   padding: '10px',
//   backgroundColor: '#f9f9f9'
// };

const ResponsiveThreeElementPanel: React.FC = () => {
  return (
    <Flex
      // style={{ ...panelContainerStyle, width: '100%' }} // Раскомментируйте для визуализации границ
      style={{ width: '100%' }}
      align="center" // Выравнивание элементов по центру по вертикали
      gap="md"       // Промежуток между элементами (можно "xs", "sm", "lg", "xl")
    >
      {/* Первый элемент (слева) */}
      <Text 
        sx={{ 
          whiteSpace: 'nowrap', // Содержимое не переносится
          flexShrink: 0         // Элемент не сжимается
          // backgroundColor: 'rgba(255, 0, 0, 0.1)' // Для отладки
        }}
      >
        Левый Элемент (короткий)
      </Text>

      {/* Второй элемент (заполняет все доступное пространство) */}
      <Text 
        sx={{ 
          flexGrow: 1,          // Элемент растягивается
          overflow: 'hidden',     // Скрывает избыточный текст
          textAlign: 'center'   // Текст по центру (опционально)
          // backgroundColor: 'rgba(0, 255, 0, 0.1)' // Для отладки
        }}
        truncate // Обрезает текст с многоточием, если он не помещается
      >
        Центральный Элемент, который занимает всё доступное пространство и может содержать очень длинный текст для демонстрации усечения и адаптивности
      </Text>

      {/* Третий элемент (справа) */}
      <Text 
        sx={{ 
          whiteSpace: 'nowrap', // Содержимое не переносится
          flexShrink: 0         // Элемент не сжимается
          // backgroundColor: 'rgba(0, 0, 255, 0.1)' // Для отладки
        }}
      >
        Правый Элемент (также короткий)
      </Text>
    </Flex>
  );
};

export default ResponsiveThreeElementPanel;

Этот компонент можно импортировать и использовать в любом месте вашего React-приложения, где установлена и настроена библиотека Mantine.

Визуализация структуры: Диаграмма компонентов

Чтобы лучше понять структуру нашей панели, давайте представим ее в виде ментальной карты. Здесь показан основной контейнер Flex и его дочерние элементы Text с ключевыми свойствами, отвечающими за их поведение в макете.

mindmap root["Создание трехэлементной панели с Mantine Flex"] FlexContainer["Flex (Контейнер)"] ;; Props propWidth["style: { width: '100%' } (Вся ширина)"] propAlign["align: 'center' (Вертикальное выравнивание)"] propGap["gap: 'md' (Отступы между элементами)"] ;; Children LeftElement["Text (Левый элемент)"] ;; Props for Left propLeftWS["sx: { whiteSpace: 'nowrap' } (Без переноса текста)"] propLeftShrink["sx: { flexShrink: 0 } (Не сжимать элемент)"] MiddleElement["Text (Центральный элемент)"] ;; Props for Middle propMiddleGrow["sx: { flexGrow: 1 } (Заполняет доступное пространство)"] propMiddleOverflow["sx: { overflow: 'hidden' } (Скрыть излишек контента)"] propMiddleTruncate["truncate (Многоточие для длинного текста)"] propMiddleTextAlign["sx: { textAlign: 'center' } (Текст по центру)"] RightElement["Text (Правый элемент)"] ;; Props for Right propRightWS["sx: { whiteSpace: 'nowrap' } (Без переноса текста)"] propRightShrink["sx: { flexShrink: 0 } (Не сжимать элемент)"]

Эта диаграмма наглядно демонстрирует иерархию компонентов и применение стилевых правил для достижения желаемого результата.

Почему Mantine `Flex` превосходит ожидания: Сравнительный взгляд

Компонент Flex из Mantine предоставляет разработчикам отличный баланс между простотой использования и мощью CSS Flexbox. Диаграмма ниже иллюстрирует ключевые преимущества использования Mantine Flex для подобных задач по верстке, оценивая их по шкале от 1 до 10 (где 10 - наилучший показатель).

Как видно, Mantine Flex обеспечивает высокую оценку по всем ключевым аспектам, делая его превосходным выбором для создания гибких и адаптивных макетов в React-приложениях.

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

Для лучшего понимания, как достигается нужный эффект, рассмотрим основные свойства Mantine (и их CSS-аналоги), использованные в нашем примере:

Свойство/Prop Mantine	CSS Эквивалент / Описание	Применение в примере
`style={{ width: '100%' }}` на `<Flex>`	`width: 100%;`	Контейнер `<Flex>` занимает всю доступную ширину родительского элемента.
`align="center"` на `<Flex>`	`align-items: center;`	Вертикальное выравнивание дочерних элементов по центру поперечной оси.
`gap="md"` на `<Flex>`	`gap: var(--mantine-spacing-md);` (значение из темы Mantine)	Устанавливает фиксированные отступы между дочерними flex-элементами.
`sx={{ whiteSpace: 'nowrap' }}` на `<Text>`	`white-space: nowrap;`	Предотвращает перенос текста на новую строку, сохраняя его на одной линии.
`sx={{ flexShrink: 0 }}` на `<Text>`	`flex-shrink: 0;`	Запрещает элементу сжиматься (уменьшаться в размере), если в контейнере недостаточно места.
`sx={{ flexGrow: 1 }}` на `<Text>`	`flex-grow: 1;`	Позволяет элементу растягиваться и занимать все доступное свободное пространство по главной оси.
`sx={{ overflow: 'hidden' }}` на `<Text>`	`overflow: hidden;`	Скрывает часть содержимого, которая не помещается в границы элемента.
`truncate` (prop на `<Text>`)	Комбинация `white-space: nowrap;`, `overflow: hidden;`, `text-overflow: ellipsis;`	Обрезает текст, который не помещается в одну строку, и добавляет многоточие (...) в конце.

Использование этих свойств через props и sx позволяет сохранить код чистым и декларативным, избегая необходимости писать отдельные CSS-файлы для таких простых задач.

Mantine в действии: Погружение в мир современных UI

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

В этом видео (на английском языке) рассматриваются основы работы с Mantine, его философия и ключевые компоненты, которые помогут вам быстро начать создавать современные React-приложения.

Часто задаваемые вопросы (FAQ)

Почему именно компонент Flex?

Компонент Flex в Mantine является прямой реализацией CSS Flexbox, который идеально подходит для создания одномерных макетов (строк или столбцов) с гибким распределением пространства. Для задачи, где нужно точно контролировать рост и сжатие элементов в одной линии, Flex предоставляет наиболее семантически верный и простой API по сравнению, например, с Grid (для двумерных макетов) или ручным управлением стилями.

Как изменить отступы между элементами?

Отступы между элементами в компоненте Flex легко настраиваются с помощью пропа gap. Вы можете использовать предопределенные значения из темы Mantine (например, "xs", "sm", "md", "lg", "xl") или передать числовое значение для пикселей (например, gap={10}). Пример: <Flex gap="lg">...</Flex>.

Можно ли использовать другие компоненты Mantine внутри этих трех элементов?

Абсолютно! В нашем примере мы использовали компонент Text для простоты. Однако каждый из трех элементов может содержать любые другие компоненты Mantine или ваши собственные React-компоненты. Например, левый элемент может быть <Button>, центральный – <TextInput>, а правый – <Avatar>. Главное, чтобы обертка (в нашем случае это <Text>, но мог бы быть и <Box>) имела правильные flex-свойства, примененные через sx.

Как сделать эту панель адаптивной для мобильных устройств?

Mantine отлично поддерживает адаптивный дизайн. Вы можете задавать разные значения для props в зависимости от размера экрана. Например, можно изменить направление Flex на вертикальное (direction="column") на маленьких экранах, или изменить отступы (gap). Это делается передачей объекта в prop: <Flex direction={{ base: 'column', sm: 'row' }} gap={{ base: 'sm', md: 'lg' }}>...</Flex>. Здесь base – значение по умолчанию (для самых маленьких экранов), sm, md – для соответствующих брейкпоинтов Mantine.