---
title: "الفاصل"
description: "يفصل بخط رفيع بين مجموعات المحتوى في قائمة أو تخطيط أو شريط أدوات."
url: "https://tanrei.chnotchy.com/ar/components/divider/"
last_updated: 2026-10-23T21:17:12.000Z
---

# الفاصل

> يفصل بخط رفيع بين مجموعات المحتوى في قائمة أو تخطيط أو شريط أدوات.

## نظرة عامة

### الاستخدام

تعرض عيّنتا Web و React المواصفة الحالية. أما SwiftUI و Compose و Flutter و React Native فمتأخرة: ما زالت تقدّم المراجعة السابقة من الفاصل، وهي ترسم خطوطًا متصلة فقط ولا تقبل أطوالًا ولا سماكة خاصة بفاصل واحد، وتعرض عيّناتها تلك المراجعة إلى أن تلحق بالبقية.

**Web**

```html
<tanrei-divider></tanrei-divider>
<tanrei-divider inset="start"></tanrei-divider>

<!-- محاذاة مع قائمة يبدأ نصها بعد 72 px. -->
<tanrei-divider inset="start" inset-length="72"></tanrei-divider>

<!-- خط قطع فوق قسيمة، وفاصل خفيف بين قسمين. -->
<tanrei-divider line-style="dashed" line-cap="round"></tanrei-divider>
<tanrei-divider line-style="wavy" amplitude="4" wavelength="24"></tanrei-divider>

<!-- خط أسمك لهذا الفاصل وحده: تحتفظ نقاطه وشرطاته وموجته بنسبها. -->
<tanrei-divider thickness="2"></tanrei-divider>
<tanrei-divider line-style="dotted" line-cap="round" thickness="4"></tanrei-divider>

<!-- لمجموعات شريط الأدوات معنى: اعرض الفاصل بدور separator. -->
<div role="toolbar" aria-label="التنسيق" style="display: flex">
  <tanrei-button variant="text" label="غامق"><span slot="icon">format_bold</span></tanrei-button>
  <tanrei-divider orientation="vertical" decorative="false"></tanrei-divider>
  <tanrei-button variant="text" label="إدراج رابط"><span slot="icon">link</span></tanrei-button>
</div>

<script type="module">
  import '@tanrei/web/components/divider';
</script>
```

**React**

```tsx
import { Divider } from '@tanrei/react';

<Divider />
<Divider inset="start" insetLength={72} />
<Divider lineStyle="dashed" lineCap="round" />
<Divider lineStyle="wavy" amplitude={4} wavelength={24} />
<Divider lineStyle="dotted" lineCap="round" thickness={4} />
<Divider orientation="vertical" decorative={false} />
```

**SwiftUI**

```swift
import Tanrei

VStack(spacing: 0) {
  inboxRow
  TanreiDivider(inset: .start)
  archiveRow
}

// المحور يُذكر صراحة، ولا يؤخذ من الحاوية المحيطة.
HStack { formattingButtons; TanreiDivider(axis: .vertical, isDecorative: false); insertLinkButton }
```

**Compose**

```kotlin
import androidx.compose.foundation.gestures.Orientation
import io.github.chnotchy.tanrei.components.TanreiDivider
import io.github.chnotchy.tanrei.components.TanreiDividerInset

Column {
    InboxRow()
    TanreiDivider(inset = TanreiDividerInset.Start)
    ArchiveRow()
}

// الفاصل العمودي يملأ ارتفاع الصف، فأعطِ الصف ارتفاعًا.
Row(Modifier.height(IntrinsicSize.Min)) {
    FormattingButtons()
    TanreiDivider(orientation = Orientation.Vertical, decorative = false)
    InsertLinkButton()
}
```

**Flutter**

```dart
import 'package:tanrei/tanrei.dart';

Column(
  children: <Widget>[
    inboxRow,
    const TanreiDivider(inset: TanreiDividerInset.start),
    archiveRow,
  ],
);

// IntrinsicHeight يعطي الفاصل العمودي ارتفاع الصف.
IntrinsicHeight(
  child: Row(
    children: <Widget>[
      ...formattingButtons,
      const TanreiDivider(axis: Axis.vertical, excludeFromSemantics: false),
      insertLinkButton,
    ],
  ),
);
```

**React Native**

```tsx
import { Divider, IconButton } from '@tanrei/react-native';

<Divider />
<Divider inset="start" />

<View style={{ flexDirection: 'row' }}>
  <IconButton accessibilityLabel="غامق" onPress={toggleBold}>format_bold</IconButton>
  <Divider orientation="vertical" decorative={false} />
  <IconButton accessibilityLabel="إدراج رابط" onPress={insertLink}>link</IconButton>
</View>
```

## المواصفات

للخط المنقّط أو المتقطع دائمًا نقطة كاملة أو شرطة كاملة عند كل من طرفيه: يرسم الفاصل أكبر عدد يتّسع له الطول مع ترك الفجوة على الأقل بين كل اثنتين، ثم يوسّع الفجوات كلها بالمقدار نفسه. فيبدو الخط واحدًا عند الطرفين، في أي من الاتجاهين وبأي طول. والموجة مؤلفة من أقواس دائرية، تُمَدّ إلى عدد صحيح من الموجات لتبدأ وتنتهي على خط المنتصف. والفاصل المتموّج أعلى من غيره: ضعف السعة مضافًا إليه سماكة الخط، أي 5 افتراضيًّا بدل 1.

أطوال النقاط والشرطات والموجة رموز (tokens) مشتقة من سماكة الخط، فنظام التصميم الذي يرسم فواصل أسمك يحصل على نمط أكبر بالمظهر نفسه. والخاصية `thickness` تفعل الشيء نفسه لفاصل واحد: تحلّ محل الرمز حيثما تُقرأ السماكة، وتحتفظ النقاط والشرطات والموجة بنسبها إليها. أما الإزاحة فلا يتغيّر مقاسها. والخصائص الخاصة بفاصل واحد (`insetLength` و `thickness` و `dashLength` و `gap` و `amplitude` و `wavelength`) تُستخدم كما أُعطيت، بوحدة المنصة، ولا يغيّر مقاسها أي قرص ضبط (dial). القيمة السالبة أو غير المنتهية، والقيمة 0 للخاصية `thickness` أو `dashLength` أو `wavelength`، تُستبدل بها قيمة الرمز ويُبلَّغ عنها في بنيات التنقيح (debug). والخاصية التي لا يرسمها النمط الحالي تُهمَل.

- Category: Containment
- Level: base
- Listing: default
- Page: https://tanrei.chnotchy.com/components/divider/
- Spec: https://github.com/chnotchy/tanrei/blob/main/specs/divider.spec.json

### Availability

| Design system | Has it | Notes |
| --- | --- | --- |
| Tanrei (`tanrei`) | Yes | — |
| Cupertino (Apple HIG-inspired) (`cupertino`) | Yes | — |
| M3 Expressive-like (Material 3 Expressive-inspired) (`m3-expressive-like`) | Yes | — |
| M3-like (Material 3-inspired) (`m3-like`) | Yes | — |

### Platforms

- Web: the element `<tanrei-divider>`, registered by importing `@tanrei/web` (or only its own module, `@tanrei/web/components/divider`).
- React: `Divider` from `@tanrei/react`.

| Platform | Name | Status |
| --- | --- | --- |
| Web | `tanrei-divider` | lagging |
| SwiftUI | `TanreiDivider` | lagging |
| Jetpack Compose | `TanreiDivider` | lagging |
| Flutter | `TanreiDivider` | lagging |
| React Native | `Divider` | lagging |

Names a platform gives in its own idiom:

| Spec | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
| --- | --- | --- | --- | --- | --- |
| `orientation` (prop) | `orientation` | `axis` | `orientation` | `axis` | `orientation` |
| `lineCap` (prop) | `lineCap` | `lineCap` | `cap` | `strokeCap` | `lineCap` |
| `decorative` (prop) | `decorative` | `isDecorative` | `decorative` | `excludeFromSemantics` | `decorative` |

Statuses: `planned` — In the inventory. Nothing shippable exists yet. `lagging` — An implementation of an earlier spec exists; it has not caught up with the current one. `alpha` — Implemented with tests. The API may still change. `beta` — Feature complete and at parity. Only fixes are expected. `stable` — Covered by semantic versioning. `deprecated` — Still shipped; scheduled for removal.

### Anatomy

- `line`: The one line, horizontal or vertical: solid, dotted, dashed or wavy. Its thickness is the system's, or the one given for this divider. It is the whole component: there is no container, and no space around it.

### Props

| Prop | Type | Default | Web attribute | Description |
| --- | --- | --- | --- | --- |
| `orientation` | `enum`: `horizontal`, `vertical` | `"horizontal"` | `orientation` | Horizontal separates stacked content and spans the container's width; vertical separates content in a row and spans its height. |
| `inset` | `enum`: `none`, `start`, `both` | `"none"` | `inset` | Shortens the line to align with content: none spans the full length, start leaves the inset at the start (to line up with an inset list's text), both leaves it at both ends (a middle divider). |
| `insetLength` | `number` | — | `inset-length` | The length of the inset for this divider, in the platform's unit (CSS px, pt, dp, logical pixels); null takes comp.divider.line.inset. Used only while inset is start or both: set it to line the divider up with content whose inset differs from the rest of the product's lists. |
| `thickness` | `number` | — | `thickness` | How thick this divider's line is, in the platform's unit (CSS px, pt, dp, logical pixels); null takes comp.divider.line.thickness. Set it where one divider of a product carries more weight than the rest (the line under a page's header, a break between two sections of a long form); a product whose every divider is heavier changes the token in its layer instead. |
| `lineStyle` | `enum`: `solid`, `dotted`, `dashed`, `wavy` | `"solid"` | `line-style` | How the line is drawn: solid, a row of dots, a row of dashes, or a wave. Most dividers are solid; the others mark a different kind of boundary in the same product (a tear line, the edge of something provisional, a light section break). |
| `lineCap` | `enum`: `butt`, `round` | `"butt"` | `line-cap` | How the line's ends, and every dot's and dash's ends, are drawn: butt ends square at the length, round ends in a half-disc inside it (round dots, rounded dashes). The difference shows only on a line thicker than a hairline. |
| `dashLength` | `number` | — | `dash-length` | The length of one dash of a dashed line, in the platform's unit; null takes comp.divider.line.dash.length. Ignored by the other styles. |
| `gap` | `number` | — | `gap` | The least space between two dots of a dotted line or two dashes of a dashed line, in the platform's unit; null takes comp.divider.line.dot.gap or comp.divider.line.dash.gap. Ignored by solid and wavy. |
| `amplitude` | `number` | — | `amplitude` | How far a wavy line's crests lie from its midline, in the platform's unit; null takes comp.divider.line.wave.amplitude. Ignored by the other styles. |
| `wavelength` | `number` | — | `wavelength` | The length of one wave of a wavy line, a crest and a trough, in the platform's unit; null takes comp.divider.line.wave.wavelength. Ignored by the other styles. |
| `decorative` | `boolean` | `true` | `decorative` | Hides the divider from assistive technology. Set it to false only when the grouping is meaningful (a toolbar's or a menu's groups): the divider is then exposed as a separator. |

### States

`enabled`

### Accessibility

- Role: `separator`
- Labeling: A divider has no accessible name. Decorative (the default), it is not in the accessibility tree; otherwise it is a separator whose orientation is exposed, and the groups on either side carry their own names.
- Minimum target size: yes

- Not interactive: a divider has no hit area, so the minimum target holds without extending anything. It never receives focus, even when it is exposed as a separator (a focusable separator is a splitter, which is a different component).
- The line is decorative for contrast purposes: comp.divider.line.color is not held to 3:1, because the content it separates must be understandable without it. A dotted or dashed line covers less of its length and reads fainter than a solid one in the same color; that is accepted for the same reason. In the default system the line is sys.color.outline-variant, the one hairline color every line of the system shares, between 1.19:1 and 3.83:1 against the surface roles depending on the scheme: visible, and never the only thing that tells two groups apart.
- The line's style carries nothing to assistive technology: a dotted, dashed or wavy divider that is not decorative is the same separator as a solid one. A product that gives a style a meaning (a tear line, a provisional section) states that meaning in text.
- Text size does not change the line: it is not text.

### Behaviour

Requirements in EARS form, each with its stable id.

- **DIV-1** THE divider SHALL draw one line of comp.divider.line.thickness, or of thickness while that is not null (DIV-16), in comp.divider.line.color, in the style lineStyle names (DIV-9 to DIV-12), along the full inline size of its container when orientation is horizontal, and along the full block size of its container when orientation is vertical.
- **DIV-2** THE divider SHALL take exactly comp.divider.line.thickness on its cross axis, or, WHERE lineStyle is wavy, twice its amplitude (DIV-12) plus comp.divider.line.thickness, whatever its length; it SHALL add no margin or padding of its own, and the space on either side of the line belongs to the layout that places it.
- **DIV-3** WHERE inset is start THE divider SHALL shorten the line by insetLength, or by comp.divider.line.inset while insetLength is null, at its start (the inline-start of a horizontal divider, the top of a vertical one), and WHERE inset is both it SHALL shorten the line by that length at each end; the inset stretch SHALL draw nothing, the style of DIV-9 to DIV-12 SHALL be laid out over the stretch that remains, and where the insets leave no length the divider SHALL draw nothing.
- **DIV-4** WHERE the layout direction is right-to-left THE divider SHALL apply the start inset of a horizontal divider at its right end and SHALL start a horizontal wavy line at its right end, mirroring it; a vertical divider's inset and wave SHALL NOT change with the direction.
- **DIV-5** WHILE decorative is true THE divider SHALL be hidden from assistive technology and SHALL NOT be focusable.
- **DIV-6** WHILE decorative is false THE divider SHALL expose the separator role and its orientation to assistive technology, SHALL have no accessible name of its own, and SHALL NOT be focusable.
- **DIV-7** WHEN orientation, inset, lineStyle or lineCap names a value that the divider does not define THE divider SHALL render with the default value, and in debug builds report the unknown value.
- **DIV-8** THE divider SHALL draw its line at least one device pixel thick; WHERE lineStyle is solid, dotted or dashed it SHALL align the line's two edges across its axis to the device pixel grid, so that the line is never spread over two partial rows or columns of pixels, and WHERE lineStyle is wavy it SHALL draw the curve antialiased.
- **DIV-9** WHERE lineStyle is solid THE divider SHALL draw the line as one unbroken stroke over the whole drawn stretch.
- **DIV-10** WHERE lineStyle is dotted THE divider SHALL draw a row of dots, each comp.divider.line.thickness long and comp.divider.line.thickness across, separated by at least gap, or comp.divider.line.dot.gap while gap is null; it SHALL draw as many dots as fit the drawn stretch with that gap between them, the first at the stretch's start and the last at its end, and SHALL widen every gap by the same amount to make them meet those ends; WHERE only one dot fits it SHALL draw that dot at the stretch's center.
- **DIV-11** WHERE lineStyle is dashed THE divider SHALL draw a row of dashes, each dashLength long (comp.divider.line.dash.length while dashLength is null, and never shorter than comp.divider.line.thickness) and comp.divider.line.thickness across, separated by at least gap, or comp.divider.line.dash.gap while gap is null; it SHALL draw as many dashes as fit the drawn stretch with that gap between them, the first at the stretch's start and the last at its end, and SHALL widen every gap by the same amount to make them meet those ends; WHERE only one dash fits it SHALL draw one dash, no longer than the stretch, at the stretch's center.
- **DIV-12** WHERE lineStyle is wavy THE divider SHALL stroke a wave about the midline of its cross axis at comp.divider.line.thickness, made of circular arcs that each span half a wavelength and alternate from one side of the midline to the other, meeting on the midline without a corner; the wavelength is wavelength, or comp.divider.line.wave.wavelength while wavelength is null, stretched or shrunk so that a whole number of waves (at least one, the nearest number) fills the drawn stretch; each arc's crest SHALL lie amplitude, or comp.divider.line.wave.amplitude while amplitude is null, from the midline to the stroke's center, but never more than a quarter of the stretched wavelength (a half circle); the wave SHALL start and end on the midline, and its first arc SHALL rise toward the top of a horizontal divider and toward the left of a vertical one.
- **DIV-13** WHERE lineCap is round THE divider SHALL end the solid line, every dot, every dash and the wave in half-discs of diameter comp.divider.line.thickness that lie inside the lengths DIV-9 to DIV-12 give them, so that a dot is a disc and no rounded end reaches into an inset or past the container; the wave's rounded ends SHALL be drawn at its first and last points, laid out over the drawn stretch shortened by half comp.divider.line.thickness at each end. WHERE lineCap is butt every end SHALL be square and flush with those lengths.
- **DIV-14** WHEN thickness, insetLength, dashLength, gap, amplitude or wavelength is null THE divider SHALL use the token that prop names; IF one of them is not a finite number, or is negative, or thickness, dashLength or wavelength is 0, THE divider SHALL use that token instead and in debug builds report the value; a value it uses SHALL be used as given, in the platform's unit, and not scaled by any dial; a prop the current lineStyle does not draw SHALL be ignored and not reported.
- **DIV-15** THE divider SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the divider is shown THE divider SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows and its state.
- **DIV-16** WHILE thickness is not null THE divider SHALL use it wherever DIV-1, DIV-2 and DIV-10 to DIV-13 name comp.divider.line.thickness — the line's extent across its axis, the side of a dot, the width of a dash and its least length, the wave's stroke, the diameter of a round cap and the divider's own size across its axis — and SHALL scale each pattern length it takes from a token rather than from a prop (comp.divider.line.dot.gap, comp.divider.line.dash.length, comp.divider.line.dash.gap, comp.divider.line.wave.amplitude and comp.divider.line.wave.wavelength) by thickness divided by comp.divider.line.thickness, so that a thicker divider keeps the pattern's proportions, as a layer that thickens the line keeps them; a pattern length given by a prop SHALL be used as given. DIV-8 holds for it: a thickness below one device pixel is drawn one device pixel thick. The thickness changes nothing that assistive technology is told, and comp.divider.line.inset and insetLength are not scaled.

### Tokens

As written in the token documents (DTCG): an alias in braces names the token it takes its value from, which each design system resolves. On the web each token is a CSS custom property: `--tanrei` and the name after `tanrei`, joined by hyphens (`tanrei.comp.divider.…` → `--tanrei-comp-divider-…`).

#### `tanrei.comp.divider`

| Token | Type | Value |
| --- | --- | --- |
| `comp.divider.line.color` | `color` | `{tanrei.sys.color.outline-variant}` |
| `comp.divider.line.thickness` | `dimension` | `{tanrei.sys.border.hairline}` |
| `comp.divider.line.inset` | `dimension` | `{tanrei.sys.space.space200}` |
| `comp.divider.line.dot.gap` | `dimension` | `2px` |
| `comp.divider.line.dash.length` | `dimension` | `4px` |
| `comp.divider.line.dash.gap` | `dimension` | `4px` |
| `comp.divider.line.wave.amplitude` | `dimension` | `2px` |
| `comp.divider.line.wave.wavelength` | `dimension` | `16px` |

## الإرشادات

### متى يُستخدم

استخدم الفاصل حيث لا تكفي المسافة وحدها لتوضيح حدّ: بين صفوف قائمة كثيفة، بين أقسام صفحة إعدادات، بين مجموعات الإجراءات في شريط أدوات. وحيث تبيّن الفجوة بين مجموعتين، أو تغيّر السطح، أين تنتهي إحداهما، اترك الخط. التخطيط الذي فيه خطوط أقل أسهل في التصفح.

### خط رفيع واحد

خط الفاصل هو الخط الرفيع في نظام التصميم: `sys.color.outline-variant`، بعرض الخط الرفيع. في النظام الافتراضي تأخذ الخطوط الرفيعة الأخرى التي يراها الشخص ذلك اللون نفسه: حافة الزر من الطراز (variant) outlined، وحدّ الرقاقة، والخط بين مجموعات قائمة الخيارات، وحافة شريط التنقل أو درج التنقل، والخط تحت صف القائمة (list). تحتفظ هذه برموزها الخاصة، ويعطيها النظام الافتراضي قيمة واحدة، ليكون في الشاشة نوع واحد من الخطوط. والفاصل الذي تضعه أنت لا يحتاج إلى لون خاص به ليطابقها.

### حيث يفصل المكوّن بين أجزائه

بعض المكوّنات تفصل بين أجزائها بنفسها، وهناك لا تضف فاصلًا:

- [قائمة الخيارات](https://tanrei.chnotchy.com/ar/components/menu/) تفصل المجموعة عمّا يجاورها.
- [مجموعة الأزرار](https://tanrei.chnotchy.com/ar/components/button-group/) المتصلة و[الزر مع قائمة](https://tanrei.chnotchy.com/ar/components/button-with-menu/) يفصلان بين نصفيهما.
- [درج التنقل](https://tanrei.chnotchy.com/ar/components/navigation-drawer/) يرسم فاصلًا قبل القسم الذي يطلبه (`divider`).
- صف [القائمة (list)](https://tanrei.chnotchy.com/ar/components/list/) يرسم الخط تحته (`divider`)، ويبدأ الخط حيث يبدأ نص الصف.

طريقة التمييز بين الأجزاء داخل المكوّن الواحد اختيار واحد لنظام التصميم كله: بخط حيث تتلامس، وهو الافتراضي، أو بفجوة من الفراغ. يستطيع المكوّن أن يخرج عن اختيار النظام برمزه الخاص، وتستطيع النسخة الواحدة ذلك بالخاصية `separation`: وهي موجودة في قائمة الخيارات ومجموعة الأزرار والزر مع قائمة ومؤشر التقدم. مع الفجوة لا ترسم تلك المكوّنات أي خط، فيصير الفاصل الذي أضفته بيدك الخط الوحيد الباقي، ولا يطابق شيئًا بعد ذلك.

أما مكوّن الفاصل نفسه فليس جزءًا من ذلك الاختيار. العنصر `<tanrei-divider>` الذي تضعه بين محتواك أنت خط دائمًا.

### اختيار الإزاحة

| الإزاحة (inset) | يُستخدم لـ |
| --- | --- |
| بلا إزاحة | حدّ يمتد على الحاوية كلها: بين الأقسام، تحت ترويسة. |
| من البداية | بين صفوف قائمة تبدأ صفوفها بأيقونة أو صورة رمزية. يبدأ الخط حيث يبدأ النص، فيُقرأ عمود البداية كتلة واحدة. |
| من الجهتين | فاصل داخل مجموعة لا ينبغي أن يبدو حدًّا للحاوية: فاصل أوسط. |

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

### اختيار نمط الخط

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

النهايات المستديرة (`lineCap="round"`) تجعل كل نقطة قرصًا وكل شرطة قضيبًا مستدير الطرفين، وتدوّر طرفي الخط المتصل أو المتموّج. تبقى الأطراف المستديرة داخل طول الخط، فتبقى الإزاحة دقيقة. على الخط الرفيع الافتراضي لا تُرى النهاية المستديرة: فهي موضوعة للفاصل الذي له قيمة `thickness` خاصة به، ولأنظمة التصميم التي ترسم خطوطًا أسمك.

### افعل

- ضع المسافة حول الفاصل في التخطيط: تباعد الحاوية التي ترصّ عناصرها، فجوة القائمة. الفاصل لا يضيف مسافة من عنده، فلا يضاعف فجوة أبدًا.
- أبقِه زخرفيًّا (وهو الافتراضي) في القوائم والبطاقات. الصفوف تقول أصلًا أين تبدأ وأين تنتهي.
- اضبط `decorative` على القيمة false فقط حيث يعني التجميع شيئًا للشخص، كمجموعات شريط أدوات أو قائمة خيارات.
- التزم نمط خط واحدًا لنوع واحد من الحدود في المنتج كله، ليعني الخط المتقطع الشيء نفسه دائمًا.

### لا تفعل

- لا ترسم خطًّا بين كل عنصرين. استخدم التباعد أولًا، والفاصل حيث لا يكفي التباعد.
- لا تستخدم الفاصل إطارًا أو حدًّا لحاوية. ليست له حاوية ولا شكل.
- لا تجعله أسمك أو ملوّنًا لتعطيه معنى. الخاصية `thickness` موضوعة لنمط يحتاج إلى الحيّز ليُرى، أو لخط يطابق خطوطًا أسمك حوله. ولون الفاصل غير مقيَّد بنسبة تباين، لأن المحتوى الذي يفصله يجب أن يُفهم من دونه.
- لا تضف فاصلًا داخل مكوّن يفصل بين أجزائه بنفسه، كما بين مجموعات قائمة خيارات أو صفوف قائمة (list). استخدم خاصية المكوّن نفسه.
- لا تضع فاصلًا على حافة صندوق يُمرَّر لتقول إن وراءها مزيدًا من المحتوى. فـ[منطقة التمرير](https://tanrei.chnotchy.com/ar/components/scroll-area/) تعلّم تلك الحافة، ما دام وراءها محتوى فقط، بالهيئة التي اختارها نظام التصميم.
- لا تدع نمط الخط يحمل معنى وحده. إن كان الخط المتقطع يعني «اقطع هنا» فقل ذلك نصًّا أيضًا.
- لا تعتمد عليه مكان عنوان. «— أو —» بين نموذجين فاصلان وتسمية، والتسمية هي التي تحمل المعنى.

## إمكانية الوصول

### ما يتكفل به المكوّن

- حين يكون زخرفيًّا (وهو الافتراضي) يُخفى عن التقنيات المساعدة على كل المنصات.
- حين لا يكون زخرفيًّا يُعرَض على الويب بدور الفاصل (separator) مع اتجاهه. منصات Apple و Android و Flutter لا دور فاصل فيها: هناك يبقى في شجرة إمكانية الوصول بلا اسم، ويقول ما تستطيع كل منصة أن تقوله.
- لا يقبل التركيز أبدًا ولا يستقبل إدخالًا، فلا يعترض أبدًا عناصر التحكم على جانبيه.
- سماكة خطه بكسل واحد من بكسلات الجهاز على الأقل. الخط المتصل أو المنقّط أو المتقطع يُحاذى إلى شبكة البكسلات عرضيًّا على محوره، فلا يظهر مغبَّشًا أبدًا؛ أما الموجة فتُرسم بتنعيم الحواف (antialiasing).
- نمط الخط لا يقول شيئًا للتقنيات المساعدة: الفاصل المنقّط أو المتقطع أو المتموّج غير الزخرفي هو الفاصل نفسه الذي يكونه المتصل.
- على الويب، يعيد وضع الألوان المفروضة (forced colors) رسم كل أنماط الخط بلون نص النظام.

### ما عليك فعله

- اذكر نصًّا أي معنى تعطيه لنمط خط، كخط القطع. التقنيات المساعدة لا تنقل النمط، والخط المنقّط أو المتقطع يبدو أبهت من المتصل.
- أعطِ كل مجموعة اسمها الخاص حين يكون التجميع مهمًّا. الفاصل بلا اسم، فلا يستطيع أن يقول ما هي المجموعات.
- لا تستخدم الفاصل ليحمل بنية الصفحة. العناوين والمعالم (landmarks) تفعل ذلك؛ أما الخط فيُرى فقط.