> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Разделитель

> Разделяйте смежный контент горизонтальным или вертикальным разделителем.

## Обзор

`Separator` рендерит `div` с `role="separator"` и доступной ориентацией. Он использует контракт разделителя Base UI, включая нативные свойства, рефы и композицию `render`. Импортируйте `SeparatorProps` из той же точки входа.

**Light**

[Горизонтальный разделитель (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-separator--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Горизонтальный разделитель (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-separator--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-separator--display)

## Использование

```tsx theme={null}
import { Separator } from 'twenty-ui/primitives/layout';
import { Text } from 'twenty-ui/primitives/typography';

export const ImportSources = () => (
  <Text style={{ display: 'grid', gap: 'var(--t-spacing-3)' }}>
    <Text>Import records from a CSV file.</Text>
    <Separator />
    <Text>Connect an external data source.</Text>
  </Text>
);
```

## Ориентация и внешний вид

По умолчанию для `orientation` задано значение `horizontal`. В обоих вариантах ориентации поля по умолчанию равны нулю. Горизонтальные разделители заполняют доступную ширину. Вертикальные разделители растягиваются вдоль своего flex-контейнера. Задайте отдельному вертикальному разделителю высоту. Управляйте отступами через родительский макет или используйте нативные `style` либо `className` для явного задания полей и цвета линии. Base UI также принимает для этих свойств функции от ориентации.

**Light**

[Вертикальный разделитель (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-separator--vertical-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Вертикальный разделитель (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-separator--vertical-documentation\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-separator--vertical-documentation)

## Разделители с метками

Используйте [LabeledSeparator](https://docs.twenty.com/ru/ui/components/layout/labeled-separator) для текстовой метки между линиями разделителя или в конце линии. Он предоставляет макет и одно доступное имя разделителя.

```tsx theme={null}
import { LabeledSeparator } from 'twenty-ui/components/layout';

export const SignInDivider = () => <LabeledSeparator>Or</LabeledSeparator>;
```

## Миграция

Замените прежний горизонтальный помощник на `Separator`. Удалите `noMargin`, поскольку поля теперь по умолчанию равны нулю. Чтобы сохранить прежние отступы по умолчанию, добавьте `style={{ marginBlock: 'var(--t-spacing-3)' }}`. Замените `color` на `style={{ backgroundColor: color }}`. Используйте `LabeledSeparator` для разделителей с метками, передавайте метку как дочерний элемент и переименуйте `textPosition` в `labelPosition`. Замените разделители, используемые только для невидимых отступов, на отступы макета.

## Свойства

**className** `string | ((state: SeparatorState) =\> string | undefined)`

CSS class or function of the separator orientation.

**orientation** `"horizontal" | "vertical"` (default: horizontal)

Direction of the divider: horizontal or vertical.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SeparatorState\>`

Element or render function composed with the native separator props and ref.

**style** `CSSProperties | ((state: SeparatorState) =\> CSSProperties | undefined)`

Native style or function of the separator orientation. Use it for spacing and line color.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.