Разделение

Базовое использование

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

Базовое использование компонента Split включает определение набора панелей с настраиваемыми свойствами и указание направления макета (horizontal или vertical).

Конфигурация панелей

Свойство panels позволяет определять макет и поведение панелей в компоненте Split. Каждая панель представлена объектом с несколькими свойствами, предоставляющими гибкость для настройки размера, ограничений и внешнего вида. Ниже приведено подробное описание каждого свойства с примерами.

Имя

Свойство name является уникальным идентификатором панели. Оно обязательно и используется для ссылок на панель в событиях, операциях изменения размера и определениях слотов.

<template>
  <Split :panels="[
      { name: 'text', size: 50 },
      { name: 'options', size: 50 }
    ]">
    <template #text>
      <div>Текст</div>
    </template>
    <template #options>
      <div>Опции</div>
    </template>
  </Split>
</template>

В этом примере:

• Первая панель идентифицируется как name: "panel1".
• Вторая панель идентифицируется как name: "panel2".

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

Размер

Свойство size задаёт начальный размер панели. Значение может быть определено в процентах или пикселях в зависимости от свойства units компонента Split.

<template>
  <Split :panels="[
       { name: 'left', size: 70 }, // 70% ширины
       { name: 'right' } // Заполняет оставшиеся 30%
     ]" 
     units="percentages">
    <template #left>
      <div>Левая панель</div>
    </template>
    <template #right>
      <div>Правая панель</div>
    </template>
  </Split>
</template>

Пояснение примера:

• Панель left явно установлена на 70% доступного пространства.
• Панель right автоматически подстраивается под оставшиеся 30% пространства, обеспечивая сбалансированный макет.

При использовании pixels для свойства units применяется тот же принцип. Убедитесь, что сумма значений size не превышает общей ширины или высоты контейнера, и предпочтительно оставьте одну панель без значения size, чтобы она динамически подстраивалась.

Минимальный размер

Свойство minSize определяет минимальный размер, до которого панель может уменьшаться при изменении размера. Это особенно полезно для предотвращения полного сворачивания панели или её непригодности для использования.

<template>
  <Split :panels="[
       { name: 'top', size: 100, minSize: 150 }, // Начинается с 150px из-за minSize
       { name: 'bottom', size: 300, minSize: 150 }
     ]"
     units="pixels">
    <template #top>
      <div>Верхняя панель</div>
    </template>
    <template #bottom>
      <div>Нижняя панель</div>
    </template>
  </Split>
</template>

Пояснение примера:

• Панель top имеет size 100 пикселей, но minSize 150 пикселей. В результате она начинается с 150 пикселей, чтобы соответствовать ограничению минимального размера.
• Панель bottom имеет size 300 пикселей и minSize 150 пикселей, что позволяет ей уменьшаться до 150 пикселей.

Правильная настройка minSize обеспечивает удобство использования панелей при гибком изменении размера.

Максимальный размер

Свойство maxSize задаёт максимальный размер, до которого панель может расширяться при изменении размера. Это гарантирует, что панель не превысит указанный предел.

<template>
  <Split :panels="[
       { name: 'left', size: 50, maxSize: 60 }, // Не может превышать 60%
       { name: 'right', size: 50, minSize: 40, maxSize: 50 } // `maxSize` будет равен `minSize` (40%)
     ]"
     units="percentages">
    <template #left>
      <div>Левая панель</div>
    </template>
    <template #right>
      <div>Правая панель</div>
    </template>
  </Split>
</template>

Пояснение примера:

• Панель left начинается с ширины 50%, но не может превышать 60%.
• Панель right имеет minSize 40% и maxSize 50%. Поскольку minSize больше maxSize, maxSize корректируется до minSize (40%). Панель начинается с 40% и не может ни расти, ни уменьшаться.

Правильная настройка maxSize позволяет задавать ограничения размера, сохраняя гибкость. Всегда проверяйте согласованность minSize, maxSize и size, чтобы избежать неожиданного поведения.

Отключение

Свойство disabled отключает изменение размера для панели. При установке в true панель не может быть изменена, а разделитель рядом с ней становится неактивным.

<template>
   <Split 
     class="relative rounded-lg border dark:border-gray-800"
     :styles="{panel: 'h-28 flex justify-center items-center font-semibold text-xl'}" 
     :panels="[
        { name: 'resizable1', },
        { name: 'resizable2', },
        { name: 'static', size: 30, disabled: true }, // Изменение размера отключено
        { name: 'resizable3' },
        { name: 'resizable4' }
     ]">
      <template #static>
         <div class="m-2">Статичная панель</div>
      </template>
      <template #resizable1>
         <div class="m-2">Изменяемая панель</div>
      </template>
      ...
   </Split>
</template>

В этом примере:

• Панель static зафиксирована на 30% ширины контейнера и не подлежит изменению размера.
• Панель resizable1 может свободно изменяться в пределах своих ограничений.

Класс

Свойство class позволяет применять пользовательский CSS-класс к панели. Это полезно для задания стилей, таких как цвет фона, отступы или границы.

<template>
  <Split :panels="[
  { name: 'styled', class: 'custom-panel-class' }, // Применён пользовательский CSS-класс
  { name: 'default' }
  ]">
    <template #styled>
      <div>Стилизованная панель</div>
    </template>
    <template #default>
      <div>Панель по умолчанию</div>
    </template>
  </Split>
</template>

В этом примере:

• Панель styled имеет пользовательский цвет фона, отступы и границы, заданные в custom-panel-class.
• Панель default использует стили по умолчанию.

Пользовательские свойства

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

Направление

Свойство direction управляет направлением макета панелей. Оно может принимать одно из следующих значений:

• "horizontal": Панели располагаются бок о бок.
• "vertical": Панели располагаются друг над другом.

<Split :panels="panels" direction="horizontal"></Split>
<Split :panels="panels" direction="vertical"></Split>

Единицы измерения

Свойство units задаёт единицы измерения для размеров панелей. Оно может принимать одно из следующих значений:

• "percentages": Размеры определяются в процентах от контейнера (по умолчанию).
• "pixels": Размеры определяются в пикселях.

<Split :panels="panels" direction="horizontal" units="percentages"></Split>
<Split :panels="panels" direction="horizontal" units="pixels"></Split>

Прозрачность разделителя

Свойство separatorNotHoverOpacity определяет, уменьшается ли прозрачность разделителя, когда на него не наведён курсор. Оно принимает:

• true: Разделитель менее заметен, когда на него не наведён курсор.
• false: Разделитель сохраняет полную прозрачность (по умолчанию).

<Split :panels="panels" :separatorNotHoverOpacity="true"></Split>
<Split :panels="panels" :separatorNotHoverOpacity="false"></Split>

Тип разделителя

Свойство separatorType определяет внешний вид разделителя между панелями. Оно может принимать одно из следующих значений:

• "strip": Простой полосный разделитель (по умолчанию).
• "hexagon": Шестиугольный разделитель.
• Любое другое допустимое имя иконки из вашей библиотеки иконок.

<Split :panels="panels" separatorType="strip"></Split>
<Split :panels="panels" separatorType="hexagon"></Split>
<Split :panels="panels" separatorType="custom-icon"></Split>

События

События изменения размера

Компонент Split генерирует несколько событий, связанных с изменением размера панелей:

• updated-panels: Генерируется при обновлении размеров панелей. Предоставляет объект с обновлёнными размерами.
• updated-size-panel: Генерируется при обновлении размера одной панели. Предоставляет новый размер и имя панели.
• start-resize-panel: Генерируется при начале изменения размера панели.
• stop-resize-panel: Генерируется при завершении изменения размера панели.
• move-resize-panel: Генерируется при активном изменении размера панели.
• out-resize-panel: Генерируется при выходе действия изменения размера за границы панели.

<Split
  :panels="panels"
  @updated-panels="onUpdatedPanels"
  @updated-size-panel="onUpdatedSizePanel"
  @start-resize-panel="onStartResize"
  @stop-resize-panel="onStopResizePanel"
  @move-resize-panel="onMoveResizePanel"
  @out-resize-panel="onOutResizePanel">
</Split>

Этот пример демонстрирует, как прослушивать события, связанные с изменением размера, в компоненте Split.

Слоты

Слоты панелей

Каждая панель в компоненте Split может иметь именованный слот, соответствующий её свойству name. Используйте слот для предоставления пользовательского содержимого панели.

<template>
  <Split :panels="panels">
    <template #panel1>
      <img class="..." src="/image/name.jpg" alt=""/>
    </template>
    <template #panel2>
      <img class="..." src="/image/name.jpg" alt=""/>
    </template>
  </Split>
</template>