Content Switcher

التثبيتنسخ رابط العنوان

الاستخدامنسخ رابط العنوان

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؛ ولاختيار يُحفظ في نموذج استخدم Radio. أبقِ الخيارات بين اثنين وأربعة بتسميات قصيرة. وسمِّ المجموعة بـ aria-label، وضع المحتوى الذي تتحكم فيه تحتها مباشرة.

البنيةنسخ رابط العنوان

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

أمثلةنسخ رابط العنوان

الأحجامنسخ رابط العنوان

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

على لون العلامةنسخ رابط العنوان

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

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

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

RTLنسخ رابط العنوان

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

إمكانية الوصولنسخ رابط العنوان

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

مرجع APIنسخ رابط العنوان

الاختلافات عن DGAنسخ رابط العنوان

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

التبايننسخ رابط العنوان