الاختيار

import"@truvar-ai/design-system"

الاختيار

اختر عنصرًا أو أكثر من مجموعة. كل نمط يناسب حجمًا مختلفًا من القوائم وطريقة مختلفة للبحث.

قائمة اختيار

مبني على Select + ListBox + Popover

اكتب حرفًا للانتقال إلى الخيار.

مصدر البيانات
المنطقة

بحث واختيار

مبني على ComboBox

يصفّي النتائج أثناء الكتابة.

إكمال تلقائي

مبني على Autocomplete + Menu

قائمة أوامر: يبقى التركيز في الحقل بينما تتنقل مفاتيح الأسهم بين النتائج. وهي المستخدمة في البحث أعلى الصفحة.

قائمة خيارات

مبني على ListBox + ListBoxSection

قائمة ظاهرة دائمًا مع أقسام، وهنا مع اختيار متعدد.

الاسم
البريد
الهاتف
الشركة
المرحلة
قيمة الصفقة
تاريخ الإغلاق

اختيار متعدد

مبني على Select / ComboBox selectionMode="multiple"

تبقى القائمة مفتوحة أثناء الاختيار، وتعرض الشارات ما اخترته، وتُجمع الاختيارات الزائدة في عدد.

اللغات التي يتحدثها الوكيل
المبيعات

قائمة تفاعلية

مبني على GridList

صفوف تحتوي أزرارًا. مفتاح Tab يصل إلى الأزرار، والأسهم تنتقل بين الصفوف.

ننادية كاملNile Foods, متابعة غدًا
ططارق صالحDelta Freight, متابعة بعد الغد
ممنى فتحيSinai Retail, متابعة خلال ٣ أيام
ههاني إبراهيمAlex Pharma, متابعة خلال ٤ أيام

قائمة مجمعة

مبني على GridList + GridListSection + GridListHeader

تبقى العناوين مع مجموعاتها وتُعلن، فيعرف الناس إلى أي مجموعة ينتمي كل صف.

مؤهل
ممنى فتحيSinai Retail
أأحمد سميرLuxor Textiles
عرض مُرسل
ططارق صالحDelta Freight
ررنا يوسفCairo Fintech
ششريف لطفيHurghada Marine
تفاوض
ننادية كاملNile Foods
ددينا أشرفAswan Solar

قائمة لا نهائية

مبني على ListBox + ListBoxLoadMoreItem

تُحمّل الصفحة التالية عند الاقتراب من الأسفل، ويُعلن صف التحميل ويتحدّث العدد.

تم تحميل ٢٠ من ١٢٠ عميل
ننادية كاملNile Foods, عميل #١
ططارق صالحDelta Freight, عميل #٢
ممنى فتحيSinai Retail, عميل #٣
ههاني إبراهيمAlex Pharma, عميل #٤
سسلمى عادلRed Sea Resorts, عميل #٥
ككريم مصطفىGiza Motors, عميل #٦
ررنا يوسفCairo Fintech, عميل #٧
أأحمد سميرLuxor Textiles, عميل #٨
ددينا أشرفAswan Solar, عميل #٩
ممحمود جابرPort Said Logistics, عميل #١٠
يياسمين حسنيMansoura Dairy, عميل #١١
ششريف لطفيHurghada Marine, عميل #١٢
ننادية كاملNile Foods, عميل #١٣
ططارق صالحDelta Freight, عميل #١٤
ممنى فتحيSinai Retail, عميل #١٥
ههاني إبراهيمAlex Pharma, عميل #١٦
سسلمى عادلRed Sea Resorts, عميل #١٧
ككريم مصطفىGiza Motors, عميل #١٨
ررنا يوسفCairo Fintech, عميل #١٩
أأحمد سميرLuxor Textiles, عميل #٢٠

الوسوم

مبني على TagGroup

استخدم مفاتيح الأسهم للتنقل بين الوسوم، ومفتاح الحذف لإزالة وسم.

التصفية حسب النتيجة
الإيرادات
الوقت الموفَّر
التكلفة
رضا العملاء
عوامل التصفية المطبقة
الربع الثالث ٢٠٢٦
مكتب القاهرة
المبيعات