Azure

مكتبةُ المكوّنات

كلُّ قطعةٍ في الواجهة، بكلِّ حالاتها

هذه الصفحةُ تعرض المكوّناتِ التي تُبنى منها كلُّ شاشةٍ في مشاريعنا: بالعربيةِ والإنجليزية، فاتحةً وداكنة. ما يتغيّر هنا يتغيّر في كلِّ شاشةٍ تستعمله.

قطع المطعم

القطع المشتركة بين وحدات النظام، مبنية على المكتبة: المبالغ بالعملات، الحالات المكتوبة، الطاولات، الأزرار الكبيرة للتشغيل، الإيصال الحراري، والتقويمات. كل وحدة تستعملها كما هي.

شعار النظام

الرمز واسم النظام من مفتاحه الوحيد — تغيير الاسم يغيّره هنا وفي كل مكان.

BrandMark
Azureنظامُ تشغيلِ المطعمAzureAzureAzure

المبالغ

بالليرة الجديدة، مع القديمة خلال الفترة الانتقالية وما يعادل الدولار عند الحاجة. الأرقام لاتينية ومعزولة فلا تنقلب في السطر العربي.

MoneyAmount

الأحجام

250ل.س9,300ل.س12,750ل.س18,500ل.س1,284,500ل.س

مع القديمة والدولار

12,750ل.س= 1,275,000 ل.س قديمة≈ 98.08 $18,500ل.س= 1,850,000 ل.س قديمة

بالدولار وفرق بإشارة

100$-500ل.س+250ل.س

إدخال مبلغ بعملته

جديدة أو قديمة كما على الورقة أو دولار بسعر اليوم، وما يعادلها بالليرة الجديدة تحتها مباشرة. تقبل أرقام لوحة المفاتيح العربية.

CurrencyAmountInput
$

= 13,000 ل.س(1 $ = 130 ل.س)

ل.س قديمة

= 13,000 ل.س

الحالات المكتوبة

كل حالة بكلمة وأيقونة ولون — لا تُفهم من اللون وحده. عائلة واحدة لكل كيان في التحليل.

StatusPill

الطاولة (§9)

متاحةمحجوزةتم الإجلاسيوجد طلببانتظار الطعامجاهز جزئيًاطلب الحسابتم الدفعتحتاج تنظيف

الصنف (§23)

في السلةمحتفظ بهبالانتظارقيد التحضيرجاهزقُدّمملغى

بطاقة المطبخ

جديدقيد التحضيرجاهزمتأخر

الحجز (§41)

بالانتظارمؤكدوصلجلسانتهىملغىلم يحضر

حجز الصالة (§46.3)

استفسارحجز مبدئيمؤكدالعقد موقّعالعدد النهائي مؤكدقيد التنفيذانتهتتمت التسويةمؤجلةملغاة

نداء الزبون

تطلب النادلطلبت الحسابتطلب تبديل راستطلب فحم

المزامنة (§81)

جميع البيانات محدثةبانتظار الاتصاللا يوجد إنترنت

الطابعة والوردية والمهمة

تعملغير متصلةنفد الورقمفتوحةمغلقةتمتلم تتم
طلب الحسابجاهزحجز مبدئي

بطاقة الطاولة

رقم الطاولة وحالتها وضيوفها ووقتها وما ينتظرها (نداء، صنف جاهز، حجز). هدف لمس واحد كبير.

TableTile

رقم الهاتف السوري

09xx بأربع ثم ثلاث ثم ثلاث خانات، ويقبل أرقام اللوحة العربية.

PhoneInput
رقم صحيح

عدّاد الكمية

أزرار كبيرة لليد الواحدة: الكمية، عدد الضيوف، عدد الأوراق النقدية.

QuantityStepper
6
1
12

أزرار التشغيل وشريطها

كبيرة ومكتوبة دائمًا («إرسال للمطبخ» لا أيقونة وحدها)، وشريط ثابت أسفل شاشة الهاتف أو الكاشير.

TouchButton · ActionBar

سطر صنف في الطلب

الكمية والاسم والاختيارات والملاحظات وحالة الصنف ومبلغه، وما يحتاجه من أزرار.

OrderItemLine
1

حمص

جاهز
450ل.س
1

تبولة

جاهز
500ل.س
2

مشاوي مشكلة

جاهز
4,400ل.س
1

سمك بالكيلو

مشوي

قيد التحضير1.4 كغ
3,500ل.س
3

عصير برتقال

جاهز
1,200ل.س
2

مياه كبيرة

جاهز
350ل.س

بنود الحساب

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

BillBreakdown
المجموع
8,950ل.س
الخدمة 10%
895ل.س
رسم الإنفاق الاستهلاكي 5%
492ل.س
التقريب
+13ل.س
الإجمالي
10,350ل.س= 1,035,000 ل.س قديمة≈ 79.62 $

الإيصال الحراري

ورق 80 مم (أو 58) أبيض في الوضعين، يُطبع وحده دون باقي الصفحة.

ReceiptFrame

مطعم بيوتي

اللاذقية — الكورنيش الجنوبي، مقابل الميناء

فاتورة
1,042
طاولة
T21
النادل
أحمد يوسف
طُبع في
2026-10-24 22:30
1× صحن مازة مشكّل1,600
2× مشاوي مشكلة4,400
3× بيبسي600
2× عيران400
1× صحن فواكه موسمية1,200
3× قهوة عربية750
المجموع
8,950ل.س
الخدمة 10%
895ل.س
رسم الإنفاق الاستهلاكي 5%
492ل.س
التقريب
+13ل.س
الإجمالي
10,350ل.س= 1,035,000 ل.س قديمة

شكرًا لزيارتكم — نتمنى لكم وقتًا طيبًا

مطعم بيوتي

2× تبديل راس600
3× قهوة عربية750

شكرًا لزيارتكم — نتمنى لكم وقتًا طيبًا

الوقت المنقضي

«منذ 8 دقائق» بالجمع الصحيح، ويتحوّل أحمر مع أيقونة عند التأخر.

Elapsed

خط زمني بالصفوف

لكل صالة أو طاولة سطر، والحجوزات كتل مكتوبة الحالة، مع وقت التجهيز والتنظيف قبلها وبعدها، والفترات، وخط «الآن». يجري الوقت باتجاه القراءة.

ResourceTimeline
09:0010:0011:0012:0013:0014:0015:0016:0017:0018:0019:0020:0021:0022:0023:0000:0001:0002:00
الصالة الكبرى400 جالس
صالة الحديقة180 جالس
السطح120 جالس

شهر من الأيام

يبدأ الأسبوع بالسبت، اليوم محاط، والأيام المزدحمة أغمق.

MonthGrid

تشرين الثاني 2026

السبتالأحدالاثنينالثلاثاءالأربعاءالخميسالجمعة

الأساسيات

الألوان والخطوط والزوايا، ثمّ أصغرُ القطع التي تُبنى منها كلُّ شاشة: الأزرار والشارات والصور الرمزية والتلميحات.

الألوان

كلُّ لونٍ في الواجهة اسمٌ من هذه الأسماء، لا رمزٌ مكتوبٌ باليد. اضغط على أيّ لونٍ لتنسخ اسمه.

tokens · ColorSwatch

لونان فقط يصنعان هويّة المشروع: لونُ الهويّة ولونُ الإبراز، ومعهما لونُ الحبر. تُكتب الثلاثةُ في كتلةٍ واحدةٍ أعلى ملفّ الأنماط، وكلُّ ما تراه هنا يُشتقّ منها — الفاتح والداكن معاً. غيّر الكتلةَ تتغيّر كلُّ شاشة.

لونُ الهويّة

لونُ الإبراز

درجاتُ الحبر

الأسطح

الخطوط الفاصلة

ألوانُ الحالة الأربعة

اللونخفيفممتلئمتى يُستعمل
الهويّةbrandنموذجنموذجالإجراءُ الرئيسي والروابط والتحديد
محايدneutralنموذجنموذجالمسودّات والإجراءات الثانوية
الإبرازaccentنموذجنموذجما يستحقّ الانتباه بلطف
نجاحsuccessنموذجنموذجمعتمد، مكتمل، في موعده
تنبيهwarningنموذجنموذجقريبٌ من موعده، يحتاج تعديلاً
خطرdangerنموذجنموذجمتأخّر، حذف، رفض
معلومةinfoنموذجنموذجقيد المراجعة، ملاحظة

ألوانُ الحالة ثابتة: لا تتبع تغييرَ الهويّة، فالأحمرُ أحمرُ في كلّ مشروع.

التدرّج والظلّ العميق

التدرّج المميّز

للإجراء الرئيسي الوحيد في الشاشة

bg-signature

الوهج

لرأس الصفحة أو حالةٍ فارغة

bg-glow

الظلّ العميق

القائمة الجانبية والتلميحات

bg-deep

أحجامُ الخط

ثمانية أحجامٍ تكفي كلَّ شاشة. الأرقام دائماً بالأرقام اللاتينية، وتصطفّ في الأعمدة.

text-*
text-4xl36px

تقريرُ الأسبوع جاهزٌ للمراجعة

رقمٌ كبير في رأس الصفحة

text-3xl30px

تقريرُ الأسبوع جاهزٌ للمراجعة

عنوانُ الشاشة

text-2xl24px

تقريرُ الأسبوع جاهزٌ للمراجعة

عنوانُ قسم

text-lg18px

تقريرُ الأسبوع جاهزٌ للمراجعة

عنوانُ بطاقة

text-[15px]15px

تقريرُ الأسبوع جاهزٌ للمراجعة

فقرةٌ تمهيدية

text-sm14px

تقريرُ الأسبوع جاهزٌ للمراجعة

النصُّ العادي

text-xs12px

تقريرُ الأسبوع جاهزٌ للمراجعة

شرحٌ تحت حقل

text-2xs11px

تقريرُ الأسبوع جاهزٌ للمراجعة

تسميةٌ صغيرة فوق مجموعة

الزوايا والظلال

زاويةٌ واحدة أساسية (10 بكسل) تُشتقّ منها البقية، وخمسةُ ظلالٍ للارتفاع. في الوضع الداكن تصير الظلالُ أعمق.

rounded-* · shadow-*

الزوايا

sm · 6
md · 8
lg · 10
xl · 14
2xl · 18
full · ∞

الظلال

xs
sm
md
lg
xl
brand

الزرّ

ستّة أشكال، كلٌّ منها يأخذ أيَّ لونٍ من ألوان الحالة. الشكلُ المميّز للإجراء الرئيسي الوحيد في الشاشة.

Button

الأشكال

كلُّ شكلٍ بكلّ لون

الأحجام

مع أيقونة

الحالات

رابطٌ بشكل زرّ

مجموعةُ أزرار

أزرارٌ متلاصقة بإطارٍ واحد، أو صفٌّ متباعد. حجمُ المجموعة ولونُها يسريان على كلّ زرّ فيها.

ButtonGroup

متلاصقة

متباعدة

زرُّ أيقونة

زرٌّ مربّعٌ بأيقونةٍ فقط. اسمُه إجباري، ويظهر تلميحاً عند المرور أو التركيز.

IconButton

الأشكال

الأحجام

زرٌّ بخيارات

إجراءٌ رئيسي، وبجانبه سهمٌ يفتح البدائل. القائمة تطفو فوق كلّ شيء ولا تُقصّ، وزرّ الهروب يغلقها.

SplitButton

الأشكال

الحالات

زرُّ النسخ

ينسخ النصّ ويقول «نُسخ» في مكانه نفسه لثانيتين. هذا زرُّ البيت نفسه، بألوان المكتبة.

قطعةٌ من البيتCopyButton
https://house.example/invite/7Q2K

الشارة

كلمةٌ قصيرة تصف حالة: خفيفة أو ممتلئة أو بإطار، مع نقطةٍ أو أيقونة.

Badge

خفيف

معتمدقيد المراجعةمتأخّرمسودّةعاجل

ممتلئ · بإطار

معتمدمتأخّرقيد المراجعةعاجل

الأحجام

صغيرمتوسّطكبير

الوسم

وسمٌ يُضغط ليتحدّد (للتصفية)، أو يُزال بزرّه، أو يحمل اسمَ شخص.

Tag · Chip

للتصفية

قابلةٌ للإزالة

الماليةالموارد البشرية

أشخاص

سارة القحطانيفهد العتيبيشركة الضيافة الراقية

العدّاد ونقطة الحالة

رقمٌ صغير في فقاعة يصير «99+» بعد حدّه، ونقطةٌ تنبض لما هو حيّ الآن.

Count · StatusDot

الأشكال

34299+597 غير مقروءة

الحالات

متّصل الآنجارٍ التزامنغير متّصل

الصورة الرمزية

الحرفان الأوّلان من الاسم بلونٍ ثابتٍ للاسم نفسه في كلّ مكان، أو الصورة إن وُجدت، مع حالة الاتصال.

Avatar · AvatarGroup

الأحجام

الحالات

مجموعة

التلميح

كلمةٌ قصيرة عند المرور أو التركيز بلوحة المفاتيح. يشرح حتى زرّاً معطّلاً لماذا هو معطّل.

Tooltip

مع اختصار

على زرٍّ معطّل

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

رموزُ المفاتيح (⌘ على أجهزة آبل، Ctrl في غيرها) وخطٌّ فاصل بكلمة أو بدونها.

Kbd · Separator

Kbd

للبحث اضغط CtrlK⇧↵Esc

Separator

أو
تعديل
مشاركة
طباعة

الحقول والنماذج

كلُّ حقلٍ هنا مبنيٌّ على حقلِ البيت: العنوانُ فوق الخانة، والرسالةُ تحتها، والخانةُ بارتفاعٍ واحدٍ وإطارٍ واحد. القوائمُ والتقويمُ تنفتح فوق الصفحة ولا يقصّها شيء.

الحقل

العنوان والخانة ورسالتها الخاصة تحتها. كلُّ حقولِ المكتبة تمرّ به.

قطعةٌ من البيتField

الحالات

نرسل إليه رابطَ الدخول فقط.

خانة نصّ

سطرٌ واحد، مع أيقونةٍ أو بادئةٍ أو لاحقة، وعدّادٍ للأحرف عند الحاجة.

TextField · Input

الحالات

فارغة

مملوءة

معطّلة

للقراءة فقط

قيد التحقّق

إضافات

+966
https://

مقبولة

يظهر في رأس التقرير.0 / 40

الأحجام

خانة نصٍّ طويل

تكبر مع الكتابة حتى حدٍّ ثم تمرّر، وتعدّ الأحرف إذا كان للنصّ حدّ.

TextAreaField · Textarea

الحالات

تصل إلى المراجِع مع الطلب.81 / 200

خانة رقم

أزرار ‎−‎ و‎+‎ (اضغط مطوّلاً لتستمرّ)، والأسهم في لوحة المفاتيح، وحدٌّ أدنى وأعلى، والأرقام تُقرأ لاتينيةً ولو كُتبت بلوحةٍ عربية.

NumberField

الحالات

ساعة

من 0 إلى 80، بخطوة نصف ساعة.

%

معطّلة

خانة بحث

زرُّ مسحٍ يظهر مع الكتابة، وEsc يمسح، واختصارُ لوحة المفاتيح يضع المؤشّر فيها.

SearchField

الحالات

كلمة المرور

زرُّ العين يُظهر ما كُتب. الخانة من اليسار إلى اليمين في اللغتين.

قطعةٌ من البيتPasswordInput

الحالات

اثنا عشر حرفاً على الأقل.

معطّلة

قائمة اختيار

كلُّ اختيارٍ من قائمة يمرّ بها. القائمةُ القصيرة تنفتح كما هي؛ الطويلةُ (سبعة خيارات فأكثر) فيها خانةُ بحثٍ تفهم الإملاءَ العربيّ.

قطعةٌ من البيتSearchSelect

الحالات

قائمة قصيرة

قائمة طويلة فيها بحث

معطّلة

خانة التاريخ

تُكتب أو تُختار من التقويم. تقبل ‎25/2/2027‎ وأرقاماً عربية وتحوّلها إلى سنة-شهر-يوم.

قطعةٌ من البيتDateInput

الحالات

خلال هذا الشهر والذي يليه فقط.

التاريخ مع الهجري

خانةُ التاريخ نفسُها، ويظهر تحتها (أو بجانبها) اليومُ نفسُه بتقويم أمّ القرى، ويتبدّل مع كلِّ اختيار.

DateField

الأشكال

بالهجري: 3 جمادى الأولى 1448 هـ

الهجري تحت الخانة

يظهر التاريخُ الهجريّ هنا بعد اختيار اليوم

الهجري بجانبها

التاريخان معاً

لعرض تاريخٍ في جدولٍ أو بطاقة: الميلاديّ والهجريّ، في سطرٍ أو سطرين، مع إبراز التقويم الحاكم.

DualDate

العرض

في سطر

2026-10-143 جمادى الأولى 1448 هـ

في سطرين

2026-10-143 جمادى الأولى 1448 هـ

الهجري هو الحاكم

2026-10-143 جمادى الأولى 1448 هـ

المبالغ

رمزُ الريال الرسميّ (ساما) مرسوماً، ويسبق الرقمَ في اللغتين. الأرقام لاتينية دائماً.

Money · RiyalSign

العرض

كامل

4,850,000

مختصر

4.9 مليون

بالرمز النصّي

1,250 ر.س

بالهللات

312.50

خانة مبلغ

تفصل الآلاف وأنت تكتب، وتقبل الأرقام العربية وتحوّلها لاتينية.

MoneyInput

الحالات

القيمة المخزّنة: لا شيء بعد

معطّلة

رمز التحقّق في خانات

رمزٌ بعددٍ ثابتٍ من الأرقام يصل برسالةٍ أو بريد. الكتابة تنتقل للخانة التالية، واللصق يملأ الكلّ، والأرقام العربية تُقرأ لاتينية. يختلف عن خانة التحقّق بخطوتين أدناه.

OtpInput

الحالات

فارغ

مكتمل

مقسوم 3 + 3

رمز الدخول بخطوتين

خانةٌ واحدة تقبل رمزَ تطبيق المصادقة (ستّة أرقام) أو رمزاً احتياطياً بالشكل XXXXX-XXXXX.

قطعةٌ من البيتCodeInput

الحالات

رفع الملفّات

اسحب أو اختر؛ تظهر الملفّاتُ تحتها بحجمها وزرِّ إزالة. لا ترسم تقدّماً إلا لرفعٍ حقيقيّ يمرّره صاحبُ الشاشة.

FileDrop

الحالات

مربّع اختيار

تشغيل أو إيقاف، و«بعضها» حين تكون مجموعةٌ مختارةً جزئياً.

Checkbox

الحالات

مربّع البيت الأصليّ (لنموذجٍ يُرسَل كما هو)

مجموعة مربّعات

عدّة خيارات تحت عنوانٍ واحد، مع «تحديد الكلّ».

CheckboxGroup

الحالات

خيارٌ واحد من عدّة

قائمةٌ عمودية أو أفقية، ولكلّ خيارٍ سطرُ شرح.

RadioGroup

الأشكال

بطاقات اختيار

لقرارٍ يحتاج كلُّ خيارٍ فيه جملةَ شرح.

RadioCards

مفتاح تشغيل

لإعدادٍ يسري فوراً، بلا زرِّ حفظ.

Switch

الحالات

الأحجام

أزرار متلاصقة

اختيارٌ واحدٌ دائماً بين خياراتٍ قليلة، مثل طريقة العرض.

SegmentedControl

الحالات

الأشكال

شرائح تصفية

عدّة اختياراتٍ تُشغَّل وتُطفأ، مع عددٍ اختياريّ.

ToggleChips

الحالات

الأحجام

منزلق

قيمةٌ واحدة أو مدى، بعلاماتٍ تحته وفقاعةٍ بالقيمة أثناء السحب.

Slider

الحالات

النوافذ والقوائم

كلُّ ما يظهر فوق الصفحة: النوافذ، واللوحة الجانبية، وسؤالُ التأكيد، والإشعارات، والقوائم، واللوحاتُ المعلّقة بزرّ — ومعها حالاتُ الصفحة الهادئة: فارغة، وتُحمَّل، وتتقدّم. كلُّ قائمةٍ وتقويمٍ هنا يُفتح كاملاً فوق النافذة التي تحمله، ومفتاحُ Esc يُغلق الطبقةَ العليا وحدها.

النافذة

نافذةٌ فوق الصفحة لمهمّةٍ قصيرة: نموذج، أو تفاصيل، أو قرار. تُغلق بمفتاح Esc أو بالضغط خارجها أو بزرّ الإغلاق، ويعود التركيز إلى الزرّ الذي فتحها. على الجوال ترتفع من أسفل الشاشة.

Dialog · DialogClose

الأحجام

نموذجٌ داخل نافذة

اللوحة الجانبية

لوحةٌ تنزلق من طرف الشاشة (من اليسار في العربية) لما يطول: مرشّحات، أو تفاصيلُ سجلّ، أو إعدادات. فيها الحقولُ نفسُها، وقوائمُها تُفتح فوقها كاملة.

Sheet

سؤالُ التأكيد

يسأل قبل ما لا رجعةَ فيه. لا يُغلق بالضغط خارجه — الجواب نعم أو لا. يمكن أن يُطلب كتابةُ كلمةٍ قبل التأكيد، وأن يعمل العملُ داخله حتى ينتهي. يُفتح من أيّ مكان، حتى من داخل نافذةٍ مفتوحة.

AlertDialog · useConfirm

الألوان

الإشعار المؤقّت

كلمةٌ قصيرة في زاوية الشاشة عن شيءٍ حدث في مكانٍ آخر أو في الخلفية. يختفي وحده، ويتوقّف عدّادُه ما دام المؤشّر فوقه، ويظهر فوق أيّ نافذةٍ مفتوحة.

toast · Toaster
الإشعارُ لا يحلّ محلّ النتيجة في مكانها: النموذجُ المحفوظ يعرض قيمَه الجديدة، والجدولُ يُعتم في مكانه وهو يتحدّث. الإشعارُ لما ليس له مكانٌ على هذه الشاشة: عملٌ انتهى في الخلفية، أو تراجعٌ عن صفٍّ غادر القائمة.

الألوان

الحالات

اللوحة المعلّقة

لوحةٌ صغيرة تحت زرّ: مرشّحٌ سريع، أو نموذجٌ من حقلين، أو معلومة. يدخلها التركيز، وتُغلق بالضغط خارجها أو بمفتاح Esc.

Popover

بطاقةُ المعاينة

تظهر عند مرور المؤشّر على اسمٍ أو رابط، أو عند الوصول إليه بلوحة المفاتيح، بعد لحظةٍ قصيرة. للمعاينة فقط — لا أزرارَ فيها.

HoverCard
راجعت منى القحطاني طلبَ الإجازة وأحالته إلى المالية.

الملاحظة على مستوى الشاشة

ملاحظةٌ عن الشاشة كلّها: رفض، أو غياب، أو حالةٌ قائمة. ليست مكانَ خطأ الحقل — ذاك يُكتب تحت الحقل نفسه.

قطعةٌ من البيتCallout
هذه البيانات تجريبية، ولا تُحفظ.
لا تملك صلاحيةَ فتح هذه الشاشة. اطلبها من مدير فرعك.

الانتظار في مكان النتيجة

ما دامت النتيجةُ في الطريق، يقول ذلك المكانُ الذي ستظهر فيه: الزرُّ يدور حتى تظهر البيانات الجديدة فعلاً، والقائمةُ تُعتم في مكانها ولا تُستبدل.

قطعةٌ من البيتcomponents/Pending

زرٌّ وقائمةٌ يشتركان في حالة انتظارٍ واحدة

  • الصفّ 1
  • الصفّ 2
  • الصفّ 3

القائمةُ لا تختفي ولا يضيع موضعُ التمرير: تُعتم فقط حتى يصل الصفُّ الجديد.

لوحةٌ ليس فيها شيءٌ بعد

جارٍ التحميل…

المؤشّر الدوّار وحده

جارٍ التحقّق من الرمز…

الحالة الفارغة

رسمٌ صغير، وعنوان، وسطرُ مساعدة، والخطوةُ التالية. أربعة أنواع: لا شيء بعد، ولا نتائج، وأنجزتَ كلَّ شيء، وتعذّر التحميل.

EmptyState

لا أحدَ هنا بعد

أضف أوّلَ شخصٍ إلى الفرع، وستظهر القائمةُ هنا.

لا نتائج لـ«محاسب أوّل»

جرّب كلمةً أقصر، أو امسح المرشّحات.

لا شيءَ ينتظرك

راجعتَ كلَّ الطلبات. سنخبرك حين يصل جديد.

تعذّر تحميلُ القائمة

انقطع الاتصال بالخادم. لم يضِع شيء.

الحجم الصغير — داخل بطاقة أو جدول

لا نتائج لـ«محاسب أوّل»

جرّب كلمةً أقصر، أو امسح المرشّحات.

الهيكل المؤقّت

شكلُ ما سيأتي، بضوءٍ هادئ يعبر باتجاه القراءة. للتحميل الأول فقط: ما هو معروضٌ ويتحدّث يبقى في مكانه ويُعتم.

Skeleton · SkeletonText · SkeletonAvatar · SkeletonCard · SkeletonTable · SkeletonTableRow

كتلٌ وأسطر

بطاقة

جدول

شريط التقدّم

كم بقي من شيءٍ يُقاس: ملفٌّ يُرفع، أو خطواتُ معالج، أو نسبةٌ من هدف. الأرقامُ لاتينية دائماً.

Progress · SegmentedProgress · ProgressRing

الشريط

رفعُ كشف الرواتب64%
اعتُمد3 من 5
مساحةُ التخزين92%

اقتربت من الحدّ — احذف المرفقات القديمة.

جارٍ تجهيزُ الملف…

الخطوات

الخطوة 2 من 4 · المرفقات

الحلقة

64%
64%
18من 25

الأرقام والرسوم

الأرقامُ المهمّة في بطاقة، والرسومُ البيانية التي تشرحها. ألوانُها من خانات الرسوم في كتلة العلامة، وأرقامُها لاتينية، والزمنُ فيها يجري من اليمين في العربية.

بطاقةُ الرقم

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

StatCard

الأشخاصُ النشطون

1,284

+12%

مقارنةً بالشهر الماضي

محاولاتُ دخولٍ فاشلة

37

−18%

الأقلُّ أفضل

عملياتُ الدخول اليوم

412

+6%

مقارنةً بالأمس

الحضورُ في الموعد

92%

الهدف 95%

طلباتٌ تنتظر

8

0%

كالأسبوع الماضي — والبطاقةُ كلُّها رابط

الأعمدة

مقارنةٌ بين فئات: أعمدةٌ قائمة للأشهر، مكدّسةٌ حين تتكوّن من أجزاء، أو صفوفٌ أفقية للأسماء العربية الطويلة. مرّر المؤشّر لترى التفاصيل.

BarChart

أعمدةٌ مكدّسة

كانون الثانيشباطآذارنيسانأيارحزيران
  • معتمدة
  • بانتظار المراجعة
  • أُعيدت للتعديل

صفوفٌ أفقية

  • العملياتُ الميدانية42
  • الهندسة31
  • خدمةُ العملاء24
  • المالية12

الخطّ

اتجاهٌ عبر الزمن، بخطٍّ أو أكثر، مع مساحةٍ ملوّنة تحت الأول وخطِّ هدفٍ متقطّع.

LineChart
  • هذا العام
  • العام الماضي

الحلقة

أجزاءُ كلٍّ واحد. تدور من الأعلى باتجاه القراءة؛ مرّر على جزءٍ ليظهر رقمُه ونسبتُه في الوسط.

Donut

80

طلباً

  • معتمدة4657%
  • بانتظار المراجعة1823%
  • أُعيدت للتعديل911%
  • مسوّدات79%

المنحنى الصغير

اتجاهٌ بلا محاور، بجانب رقمٍ أو داخل بطاقة. ينتهي بنقطةٍ عند آخر قيمة.

Sparkline
عملياتُ الدخول29
الحضورُ في الموعد92
محاولاتُ دخولٍ فاشلة6
أشخاصٌ جدد7

مفتاحُ الألوان

يشرح ألوانَ الرسم. الخاناتُ الثماني تتبع العلامةَ والوضعَ الداكن، ولا لونَ مكتوبٌ بيده.

ChartLegend

خاناتُ الرسوم الثماني

  • chart-1
  • chart-2
  • chart-3
  • chart-4
  • chart-5
  • chart-6
  • chart-7
  • chart-8

مع القيم

  • معتمدة46
  • بانتظار المراجعة18
  • أُعيدت للتعديل9

جدولُ البيانات

جدولُ البيت نفسُه، لا نسخةٌ من مكتبةٍ أخرى. يقرأ قاعدةَ البيانات، فلا يُرسم في هذه الصفحة.

قطعةٌ من البيتcomponents/data-table

يجلب الصفحةَ التي تراها فقط من الخادم، ويرتّب ويبحث هناك، ويفتح الصفَّ في لوحةٍ جانبية، ويختار القارئُ أعمدتَه ويغيّر عرضَها. يعمل في شاشة «الأشخاص».

افتح شاشة الأشخاص