# Separator ## Кратко `Separator` — примитив визуального разделения для горизонтальных и вертикальных границ между соседними областями интерфейса. ## Импорты ```tsx import { Separator, type SeparatorProps } from '@vega-ui/react'; ``` ## Экспортируемые типы - `SeparatorProps` ## Базовое использование ```tsx import { Heading, Separator, Text } from '@vega-ui/react'; export default function BasicUsage() { return (
Notifications Email me when someone mentions me or assigns me a task.
Privacy Only workspace members can see my profile and activity.
); } ``` ## Варианты - Ориентация: `horizontal` или `vertical` - Раскладка: горизонтальная линия на всю ширину или вертикальный разделитель на всю высоту ## Пограничные случаи - Вертикальным разделителям нужна явная высота от родительской раскладки. - Компонент визуальный; отступы по-прежнему определяет окружающая раскладка. - Декоративные разделители не должны заменять настоящие заголовки или группировку через fieldset. ## Частые ошибки - Вертикальный разделитель рендерится без заданной высоты родителя. - Разделители используются там, где на самом деле нужна семантическая группировка. - От `Separator` ожидают, что он сам создаст отступы в раскладке. ## Примеры ### Базовый #### Базовый: разделитель в сводке заказа Горизонтальный `Separator` растягивается на ширину контейнера и отделяет итог от позиций заказа. Отступы задаёт `gap` родителя, а не сам разделитель. ```tsx import { Separator, Text } from '@vega-ui/react'; const items = [ { name: 'Wireless keyboard', price: '$89.00' }, { name: 'USB-C hub, 7 ports', price: '$45.00' }, { name: 'Shipping', price: '$6.50' }, ]; export default function HorizontalSectionDivider() { return (
{items.map((item) => (
{item.name} {item.price}
))}
Total $140.50
); } ``` ### Контролируемый/с состоянием #### Контролируемый/с состоянием: разделители только между видимыми группами Разделители рендерятся между группами и никогда перед первой, поэтому скрытая фильтром группа не оставляет двойной или висящей линии. Каждая группа остаётся `section` с подписью из заголовка, так что структура не держится на линии. ```tsx import { Button, Heading, Separator, Text } from '@vega-ui/react'; import { Fragment, useState } from 'react'; const projects = [ { name: 'Website redesign', status: 'active' }, { name: 'Mobile onboarding', status: 'active' }, { name: 'Q3 pricing test', status: 'paused' }, { name: 'Legacy API migration', status: 'archived' }, { name: 'Holiday campaign', status: 'archived' }, ]; const groups = [ { status: 'active', title: 'Active' }, { status: 'paused', title: 'Paused' }, { status: 'archived', title: 'Archived' }, ]; export default function ConditionalDivider() { const [showArchived, setShowArchived] = useState(false); const visibleGroups = []; for (const group of groups) { if (group.status === 'archived' && !showArchived) continue; const items = projects.filter((project) => project.status === group.status); if (items.length === 0) continue; visibleGroups.push({ ...group, items }); } return (
{visibleGroups.map((group, index) => ( {index > 0 && }
{group.title} {group.items.map((project) => ( {project.name} ))}
))}
); } ``` ### Форма/интеграция #### Форма/интеграция: разделитель между группами полей Две группы `Fieldset` со своими легендами, разделённые линией. Разделитель только визуальный: доступные имена группам дают легенды, а отправка читает обе группы через `FormData`. ```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 (
setSaved('')} style={{ display: 'grid', gap: 'var(--spacing-12)', width: '100%' }} >
Personal details
Company
{saved && {saved}}
); } ``` ### Раскладка/оверлей #### Раскладка/оверлей: вертикальные разделители на панели инструментов Вертикальные разделители делят `role='toolbar'` на группы форматирования, списков и выравнивания. Вертикальный разделитель берёт `height: 100%`, поэтому у панели задана явная высота; у каждой кнопки-иконки свой `aria-label`. ```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 (
); } ``` ### Ошибка #### Ошибка: разделитель перед опасной зоной Разделитель отделяет форму с разрушительным действием от обычных настроек. Подтверждение проверяется при отправке: при несовпадении поле помечается невалидным, `HelperText` связывается через `aria-describedby`, а ввод снимает ошибку. ```tsx import { Button, Heading, HelperText, Label, Separator, Text, TextField, TextFieldInput, } from '@vega-ui/react'; import { useState, type CSSProperties, type FormEvent } from 'react'; const workspaceName = 'acme-marketing'; const destructive = { '--button-background-color': 'var(--color-red-accent-500)', '--button-background-color-hover': 'var(--color-red-accent-600)', '--button-background-color-active': 'var(--color-red-accent-700)', } as CSSProperties; export default function DividerBeforeDestructiveSection() { const [error, setError] = useState(''); const [deleted, setDeleted] = useState(false); const onSubmit = (event: FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); if (data.get('confirmation') !== workspaceName) { setError(`Type ${workspaceName} exactly to confirm.`); return; } setDeleted(true); }; return (
Workspace name {workspaceName}
Delete workspace All projects, files and billing history are removed permanently.
setError('')} /> {error && {error}}
{deleted && Workspace scheduled for deletion.}
); } ``` ### Отключённый #### Отключённый: разделитель в отключённом Fieldset У `Separator` нет отключённого состояния: он лежит внутри `Fieldset`, который отключён целиком, а пояснение связано с группой через `aria-describedby`. Переключатель показывает одну и ту же раскладку в обоих состояниях. ```tsx import { Button, Fieldset, FieldsetLegend, Label, Separator, Text, TextField, TextFieldInput, } from '@vega-ui/react'; import { useState } from 'react'; export default function MutedSectionBreakInDisabledPanel() { const [locked, setLocked] = useState(true); return (
Outgoing mail
{locked ? 'Managed by your IT team.' : 'Changes apply to new messages only.'}
); } ``` ### Пограничный случай #### Пограничный случай: вертикальный разделитель без фиксированной высоты `height: 100%` схлопывается в ноль, если у родителя нет определённой высоты. В строке, высота которой задаётся содержимым, переопределите её через `height: 'auto'` и `alignSelf: 'stretch'`, чтобы линия заняла высоту строки. ```tsx import { Separator, Text } from '@vega-ui/react'; const stats = [ { label: 'Revenue', value: '$12.4k' }, { label: 'Orders', value: '318' }, { label: 'Refunds', value: '4' }, ]; export default function ConstrainedVerticalDivider() { return (
{stats.map((stat, index) => (
{index > 0 && }
{stat.label} {stat.value}
))}
); } ``` #### Пограничный случай: декоративный разделитель Внутри списка каждый `role='separator'` озвучивается между пунктами. Если линия чисто декоративная, передайте `aria-hidden`, чтобы скринридер читал только пункты списка. ```tsx import { Separator, Text } from '@vega-ui/react'; const posts = [ { title: 'Release notes 3.2', date: 'Mar 12' }, { title: 'Dark mode for charts', date: 'Mar 5' }, { title: 'Faster CSV exports', date: 'Feb 26' }, ]; export default function DecorativeDivider() { return (
    {posts.map((post, index) => (
  • {index > 0 && }
    {post.title} {post.date}
    • ))}
); } ``` ## Анатомия ### Обзор `Separator` — примитив из одной части, который рендерит тонкую разделительную линию с `role='separator'`. ### Обязательные части #### `Separator` Обязательная часть. Отвечает и за семантическую роль разделителя, и за визуальную линию. ### Необязательные части Экспортируемых дочерних частей нет. ### Порядок композиции 1. `Separator` ### Допустимые варианты композиции Горизонтальный разделитель между содержимым и подвалом и вертикальный — между действиями подвала. У строки подвала явная высота, потому что вертикальный разделитель берёт `height: 100%` от родителя. ```tsx import { Button, Card, Heading, Separator, Text } from '@vega-ui/react'; export default function ValidCompositionPatterns() { return (
Quarterly report Revenue grew 12% compared to the previous quarter.
); } ``` ### Недопустимые варианты композиции #### Вертикальный разделитель без высоты родителя Разделитель схлопывается, потому что у него нет контекста высоты. #### Разделитель как единственная структура раздела Это создаёт визуальное разделение без семантической подписи.