# Content Switcher

صف قصير من خيارين إلى أربعة يبدّل العرض تحته. ثلاثة أحجام ونسخة للألوان الداكنة، ويبقى خيار واحد مختارًا دائمًا.

<Preview name="content-switcher-basic" title="مبدّل المحتوى" />

## التثبيت

<ComponentInstall name="content-switcher" />

## الاستخدام

```tsx title="page.tsx"
import { useState } from "react";
import { ContentSwitcher, ContentSwitcherItem } from "@/components/ui/content-switcher";

export function PeriodSwitcher() {
  const [period, setPeriod] = useState("week");
  return (
    <ContentSwitcher value={period} onValueChange={setPeriod} aria-label="الفترة">
      <ContentSwitcherItem value="day">يوم</ContentSwitcherItem>
      <ContentSwitcherItem value="week">أسبوع</ContentSwitcherItem>
      <ContentSwitcherItem value="month">شهر</ContentSwitcherItem>
    </ContentSwitcher>
  );
}
```

استخدم Content Switcher لتغيير طريقة عرض مجموعة محتوى واحدة: عرض يومي أو أسبوعي أو شهري، أو قائمة أو خريطة. وتعرض كل الخيارات النوع نفسه من الأشياء. ولأقسام محتوى منفصلة استخدم [Tabs](/ar/docs/components/tabs)؛ ولاختيار يُحفظ في نموذج استخدم [Radio](/ar/docs/components/radio). أبقِ الخيارات بين اثنين وأربعة بتسميات قصيرة. وسمِّ المجموعة بـ `aria-label`، وضع المحتوى الذي تتحكم فيه تحتها مباشرة.

## البنية

- **المبدّل** (`role="group"`): المسار، بلون neutral-100 وحد 1px. بارتفاع 32 أو 40 أو 48px.
- **الخيار** (زر تبديل مع `aria-pressed`): تسمية وأيقونة اختيارية. وللخيار المختار تعبئة أساسية وتسمية بيضاء.

## أمثلة

### الأحجام

قيمة `size` إما `sm` أو `md` (الافتراضي) أو `lg`. وتشترك المبدّلات الثلاثة هنا في قيمة واحدة.

<Preview compact name="content-switcher-basic" title="الأحجام" />

### على لون العلامة

يلائم `onColor` خلفية بلون العلامة: مسار أسود شفاف وخيار مختار أبيض.

<Preview compact name="content-switcher-on-color" title="على لون العلامة" />

### معطّل وبأيقونات ومُدار

يبقى الخيار المعطّل ظاهرًا ولا يمكن اختياره. ضع أيقونة أولًا في الخيار حين تفيد، ومرّر `value` مع `onValueChange` لتملك التحديد.

<Preview compact name="content-switcher-states" title="معطّل وبأيقونات ومُدار" />

## RTL

يقع الخيار الأول على اليمين ويتبادل السهمان يمين ويسار. وعرض المبدّل بقدر خياراته؛ أعطه `className="w-full"` ليملأ صفًا.

<DirectionCompare name="content-switcher-basic" title="مبدّل المحتوى" />

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

| المفتاح | الإجراء |
| --- | --- |
| <kbd>Tab</kbd> | ينقل التركيز إلى المبدّل (إلى الخيار المختار) ثم يخرج منه. |
| <kbd>ArrowRight</kbd> | ينقل التركيز إلى الخيار التالي (والسابق بالعربية). |
| <kbd>ArrowLeft</kbd> | ينقل التركيز إلى الخيار السابق (والتالي بالعربية). |
| <kbd>Enter</kbd> | يختار الخيار المركَّز. |
| <kbd>Space</kbd> | يختار الخيار المركَّز. |

- مبنية على Base UI Toggle Group: `group` من أزرار مع `aria-pressed`، وأحدها في ترتيب Tab (تركيز متنقل). واختيار الخيار المضغوط مرة أخرى لا يفعل شيئًا، فيبقى خيار واحد مختارًا دائمًا.
- يظهر الخيار المختار من التعبئة ومن `aria-pressed`. والتسمية بنسبة 4.5:1 على المسار، وتعبئة المختار 3:1 مقابله، فاتحًا وداكنًا. والتركيز حد بسمك 2px داخل الخيار.
- إن تغيّر المحتوى تحته فأعلِن عنه: ضعه في منطقة `aria-live="polite"` أو انقل التركيز إليه.

## مرجع API

<ApiReference component="content-switcher" />

## الاختلافات عن DGA

- في Figma عنصران أو ثلاثة بتسمية بيضاء ونسخة OnColor؛ بينما لا يضبط CSS إلا `margin: 10px`. وصُمّم المسار وتعبئة المختار هنا من رموز الأزرار.
- على خلفية العلامة يكون المسار أسود شفافًا لا أبيض: فالأبيض يُفتّح التعبئة ويخفض التسمية البيضاء إلى 3.34:1 (و2.81:1 عند الضغط).

<ComponentDeviations component="content-switcher" />

## التباين

<ComponentContrast component="content-switcher" />


---

[فهرس كل الصفحات](https://dga.omqkhafi.dev/ar/llms.txt)