# Separator: Руководства
## Паттерны
### Разделитель на панели инструментов
Когда использовать:
- соседним действиям нужна ненавязчивая визуальная граница
Заметки по композиции:
- используйте `orientation='vertical'`
- задайте родителю реальную высоту
Компромиссы:
- малый визуальный вес
- зависит от размеров родителя
```tsx
import { Icon, IconButton, Separator } from '@vega-ui/react';
import { AlignCenter, AlignLeft, Bold, Italic, Link, List, ListOrdered } from '@vega-ui/icons';
export default function VerticalDividerInToolbar() {
return (
);
}
```
### Разрыв раздела внутри панели
Когда использовать:
- в панели есть две связанные, но разные области
Заметки по композиции:
- ставьте разделитель между областями, у которых уже есть подписи
- добавляйте отступы раскладкой, а не самим разделителем
Компромиссы:
- поверхность остаётся чистой
- не объясняет причину разделения
```tsx
import { Card, Heading, Separator, Text } from '@vega-ui/react';
export default function SectionBreakInsideAPanel() {
return (
Usage this month
7,420 of 10,000 API requests used.
Next invoice
$49.00 on April 1, charged to Visa ending in 4242.
);
}
```
### Разрыв в плотной форме
Когда использовать:
- одна поверхность формы содержит несколько коротких групп
Заметки по композиции:
- используйте `Separator` вместе с явными подписями или legend
- не полагайтесь только на линию
Компромиссы:
- большие формы остаются читаемыми
- рядом всё равно нужны семантические подписи разделов
```tsx
import {
Button,
Fieldset,
FieldsetLegend,
Label,
Separator,
Text,
TextField,
TextFieldInput,
} from '@vega-ui/react';
import { useState, type FormEvent } from 'react';
export default function DividerBetweenFieldGroups() {
const [saved, setSaved] = useState('');
const onSubmit = (event: FormEvent) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
setSaved(`Saved ${data.get('fullName')} <${data.get('email')}>, ${data.get('company')}`);
};
return (
);
}
```
## Сравнение
### Быстрое правило выбора
Используйте `Separator` для лёгкого визуального разделения. Используйте `Heading` или `Fieldset`, когда интерфейсу нужна именованная структура, а не просто линия.
### `Separator` или `Fieldset`
- Используйте `Separator` для визуального разделения.
- Используйте `Fieldset` для семантики группы полей формы.
### `Separator` или `Heading`
- Используйте `Separator`, когда видимый заголовок не нужен.
- Используйте `Heading`, когда разделу нужна семантическая подпись.
### `Separator` или `Card`
- Используйте `Separator` внутри существующей раскладки.
- Используйте `Card`, когда всему разделу нужна собственная поверхность.
### Выбирайте этот компонент, когда
- двум соседним областям нужен ненавязчивый разделитель
- семантическая группировка уже решена в другом месте
### Не выбирайте этот компонент, когда
- разделу нужна подпись
- набору контролов нужна нативная семантика группы
## Решение проблем
### Вертикальный разделитель не виден
#### Симптом
Задано `orientation='vertical'`, но разделителя не видно.
#### Вероятная причина
Родительская раскладка не задаёт высоту, которую разделитель мог бы заполнить.
#### Как проверить
- изучите высоту родительского контейнера
- временно задайте явную высоту и проверьте, появится ли разделитель
#### Решение
Задайте родителю определённую высоту или контекст растяжения, когда используете вертикальный разделитель.
### Разделитель не создаёт достаточно места
#### Симптом
Содержимое по-прежнему выглядит тесным, хотя разделитель есть.
#### Вероятная причина
`Separator` только рисует линию и не управляет отступами раскладки.
#### Как проверить
- изучите значения gap, margin или padding вокруг
#### Решение
Добавьте отступы в родительской раскладке, а за разделителем оставьте только визуальное разделение.
### Разделители есть, но структуры всё равно не хватает
#### Симптом
Разделы визуально разделены, но пользователи не понимают, что означает каждый из них.
#### Вероятная причина
Разделители используются там, где структуру должны задавать заголовки или legend формы.
#### Как проверить
- мысленно уберите линии и проверьте, остаётся ли смысл разделов понятным
#### Решение
Добавьте `Heading`, `Label` или `FieldsetLegend` там, где нужна семантическая подпись.