البناء · جديد

شريط البحث

البحث في رأس التطبيق: شريط مستدير بارتفاع 56px بزر القائمة وحقل البحث وحتى إجراءين أو الصورة الرمزية.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/search-bar

الاستخدام

import { SearchBar } from "@/components/ui/search-bar";

<SearchBar
  label="Search"
  leading={<IconButton variant="ghost" size="md" shape="round" icon={ListIcon} label="Menu" />}
  trailing={<IconButton variant="ghost" size="md" shape="round" icon={MicrophoneIcon} label="Search by voice" />}
/>

أمثلة

الإجراءات

إجراء أو إجراءان في النهاية (Show 2nd button). سهم الرجوع في البداية ينعكس مع اتجاه القراءة.

مرجع الخصائص

SearchBar

يقبل خصائص <input> أيضًا.

الخاصية	النوع	الوصف
`label`	`string`	اسم الحقل لقارئ الشاشة ونصه النائب. اكتبه بلغة الصفحة.
`leading`	`ReactNode`	‏Leading Button: عادةً زر أيقونة مستدير للقائمة.
`trailing`	`ReactNode`	‏Trailing Button 1 و2 أو الصورة الرمزية (Show avatar).

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	زر القائمة، ثم الحقل مع حلقة التركيز حول الشريط، ثم الإجراءات.

ARIA

الشريط role="search" والحقل type="search" باسم (label).
أزرار الأيقونات تحتاج أسماء (label في IconButton).

ملاحظات العربية والاتجاه

ينعكس

زر القائمة في بداية الشريط (اليمين) والإجراءات في نهايته (اليسار).

لا ينعكس

أيقونات القائمة والعدسة والميكروفون لا تنعكس.

الأرقام: لا أرقام في الشريط.
الخط العربي: label-16.
النص ثنائي الاتجاه: الحقل يأخذ dir="auto".

كل المكونات ›