> ## 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/ar/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.