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

# فاصل مُسمّى

> افصل المحتوى بتسمية نصية في الوسط أو بمحاذاة النهاية.

## نظرة عامة

يجمع `LabeledSeparator` بين [Separator](https://docs.twenty.com/ar/ui/primitives/layout/separator.md) و[Text](https://docs.twenty.com/ar/ui/primitives/typography/text.md) في فاصل أفقي مُسمّى. يوفر تطبيقك التسمية والتباعد المحيط بها.

**Light**

[فاصل مُسمّى بين خيارات الاستيراد (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[فاصل مُسمّى بين خيارات الاستيراد (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--display\&viewMode=story\&globals=colorScheme:dark)

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

## استخدام

```tsx theme={null}
import { LabeledSeparator } from 'twenty-ui/components/layout';
import { Button } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const ImportOptions = () => (
  <Text
    style={{
      display: 'grid',
      gap: 'var(--t-spacing-3)',
      width: 320,
      maxWidth: '100%',
    }}
  >
    <Button fullWidth>Import a CSV file</Button>
    <LabeledSeparator>Or</LabeledSeparator>
    <Button fullWidth variant="outline">
      Connect a data source
    </Button>
  </Text>
);
```

## موضع التسمية وطابعها

تكون القيمة الافتراضية لـ `labelPosition` هي `center`، مع خط على كل جانب من التسمية. استخدم `end` لوضع التسمية بعد الخط البادئ. تقبل التسمية سلسلة نصية يوفرها تطبيقك ويترجمها محليًا.

تكون القيمة الافتراضية لـ `tone` هي `neutral`. استخدم `danger` لمؤشر أحمر بتسمية ذات وزن متوسط وخط أكثر سُمكًا. اضبط `hasStartMarker` لإضافة غطاء زخرفي صغير في بداية الخط.

يتبع الغطاء الاختياري [تصميم خط التقويم والدردشة المشترك](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=118289-146574).

**Light**

[مؤشر غير المقروء بمحاذاة تسمية إلى النهاية (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--unread-marker\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مؤشر غير المقروء بمحاذاة تسمية إلى النهاية (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--unread-marker\&viewMode=story\&globals=colorScheme:dark)

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

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

export const UnreadMarker = () => (
  <LabeledSeparator
    labelPosition="end"
    tone="danger"
    hasStartMarker
    style={{ width: 488, maxWidth: '100%' }}
  >
    New
  </LabeledSeparator>
);
```

## التباعد وحالة التطبيق

يملأ المكوّن حاويته ولا يضيف هامشًا خارجيًا. استخدم تباعد التخطيط الأب أو `style` و`className` الأصليين للهوامش والمحاذاة. احتفظ بالإزاحات للصور الرمزية المجاورة أو مواضع التقويم في تطبيقك.

يعرض المكوّن التسمية المقدمة. يحدد تطبيقك موضع حد غير المقروء أو مؤشر التقويم ووقت ظهوره.

## إمكانية الوصول والتركيب

يعرض الجذر فاصلًا أفقيًا واحدًا مُسمّى استنادًا إلى تسميته. تكون مقاطع الخط ومؤشر البداية الاختياري زخرفية، لذلك لا تعلن التقنية المساعدة عن فواصل إضافية. يمكن للسمات الأصلية المتاحة الوصول توفير اسم أو وصف مختلف عند الحاجة.

تستهدف السمات الأصلية والأنماط وأسماء الفئات و`ref` عنصر `div` الخارجي. استخدم `render` لتركيب عنصر آخر غير تفاعلي مع تمرير الخصائص وref المقدمين. يتم تصدير `LabeledSeparatorProps` من `twenty-ui/components/layout`.

## الترحيل

استبدل `LabeledDivider` في الواجهة الأمامية بـ `LabeledSeparator`. أعد تسمية `textPosition` إلى `labelPosition`، واستخدم `tone="danger"` للمظهر الأحمر لمؤشر غير المقروء. أزل `noMargin`، لأن الهوامش الخارجية تكون صفرًا افتراضيًا. حافظ على التباعد الافتراضي السابق باستخدام `style={{ marginBlock: 'var(--t-spacing-3)' }}` عند الحاجة.

## الإزاحة

**children** `string` *required*

Text naming the separator. Supplied and localized by the caller.

**hasStartMarker** `boolean` (default: false)

Show a decorative cap at the beginning of the rule.

**labelPosition** `"center" | "end"` (default: center)

Place the label between two lines or at the end of one line.

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

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**tone** `"danger" | "neutral"` (default: neutral)

Neutral divider or red marker with a thicker rule.


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