الحاجة دي اسمها إيه؟
أنت شايف العنصر بس مش عارف اسمه، فمش قادر تدوّر عليه ولا تطلبه من الـ AI. اوصفه بكلامك العادي، وهنديك اسمه الرسمي بالعربي والإنجليزي، ورمزه في الكود، وبرومبت جاهز تلزقه للوكيل البرمجي بتاعك.
البحث بيفهم العربي بأي إملاء، والفرانكو كمان: اكتب «zorar» أو «shreet el ta2adom».
مفتاح التعرّف
.swipeActions / ItemTouchHelperتسحب الصفّ على جنب، فتطلع لك أزرار كانت مختبية تحته طول الوقت.
FloatingActionButtonالدايرة اللي واقفة فوق المحتوى في ركن الشاشة، وفيها علامة زائد بتبدأ بيها حاجة جديدة.
SwipeRefreshLayout / .refreshableتشدّ القائمة لتحت شويّة وتسيبها، فتلفّ الدايرة وينزل الجديد. مفيش زرار، لازم تكون عارفها.
UIAlertController .actionSheetالقايمة اللي بتطلع من تحت أول ما تدوس على النقط التلاتة، الحذف بالأحمر فوق والإلغاء قاعد لوحده تحت.
IntersectionObserverالليستة اللي مبتخلّصش: كل ما تنزل تحت يجيلك عشرة كمان، والفوتر عمره ما هيوصلك.
IntersectionObserverالفهرس اللي جنب المقال، والرابط اللي بينوّر لوحده على القسم اللي أنت واقف عنده.
text-overflow: ellipsisالاسم الطويل اللي بيتقطع وبيسيب «…» في آخره، والباقي لازم يفضل موجود في مكان ما.
role="radiogroup"الزراير الملزوقة في بعض، واحد منهم بس شغّال، والخلفية بتزحلق ناحية اللي تدوس عليه.
aria-roledescription="carousel"الشريط اللي بيقلّب البانرات بسهمين ونقط تحتيه، والناس غالباً ما بتشوفش غير أول شريحة.
popover="auto" + role="dialog"الصندوق الصغير اللي بيفتح جنب الزرار وفيه حاجات تتضغط، وبيقفل أول ما تدوس بره.
role="dialog" + role="combobox"دوس Cmd+K واكتب اسم اللي انت عايزه، ينفّذه على طول من غير ما تلفّ على المنيوهات.
role="menu" + role="menuitem"القايمة اللي بتفتح من زرار الثلاث نقط أو من كليك يمين، وكل سطر فيها بينفّذ أمر وتقفل ورا نفسها.
<header> + <nav>الشريط اللي فوق في كل صفحة: اللوجو في أوّله، وروابط الأقسام جنبه، والبحث والحساب في آخره.
<aside> / <nav>العمود اللي على جنب الشاشة وفيه كل صفحات التطبيق، وثابت مكانه مهما لفّيت.
<hr> / role="separator"خطّ رفيع واحد بتلات معاني مختلفة. عينك مش هتفرّق بينهم، وشجرة الوصول هي اللي بتفرّق.
<table> + <th scope>الصفوف والأعمدة اللي بتخلّيك تقارن الأرقام على طول، وأول ما تدوس على عنوان العمود يترتّب لك.
<img alt> / AvatarGroupالدايرة الصغيّرة اللي فيها صورتك، ولو مفيش صورة بتكتب أول حرف من اسمك.
role="alert"الرسالة اللي بتفضل مكانها في الصفحة ومش بتختفي لوحدها، يا جنب الحقل يا شريط فوق.
role="status" / badgeContentالرقم الصغير اللي قاعد على ركن الأيقونة ومش بيتضغط. اللي بيتضغط هو الأيقونة نفسها.
role="progressbar"الشريط بيقولّك وصلت لفين. الدوّار بيقولّك استنّى وخلاص.
<input type="file">دوس عليه يفتحلك ملفّات الجهاز، أو اسحب الملف من على سطح المكتب وارميه فيه.
role="combobox"اكتب حرفين والباقي بيقلّ لوحده لحد ما يفضل قدّامك اللي انت بتدوّر عليه.
<input type="text">الخانة اللي بتكتب فيها اسمك. أبسط حاجة في الشاشة، وفيها أجزاء كتير محدش بيعرف اسمها.
<input type="range">الخطّ اللي عليه كورة بتسحبها، وكل ما تسحب الرقم يتغيّر قدّامك على طول.
role="radiogroup"الدواير اللي تختار منها واحدة بس، وأول ما تدوس على واحدة التانية تفضى لوحدها.
<input type="checkbox">المربّع الصغير اللي بتحطّ فيه علامة صح. علّم قدّ ما تحب، ومحدش فيهم بيلغي التاني.
<label for>العنوان اللي فوق الخانة، والسطر الصغير اللي تحتها، ورسالة الغلط. حاجة واحدة، وكل قطعة فيها ليها شغلانة.
BottomSheetDialog / .presentationDetentsاللوحة اللي بتطلع لك من تحت وتقف في النصّ، وتقدر تشدّها فوق أو ترميها تحت.
TabView / NavigationBarالشريط اللي تحت خالص في التطبيق: أربع أيقونات، كل واحدة قسم لوحده، وترجع تلاقيه زي ما سبته.
role="dialog" / inset-inline-startاللوح اللي بيتزحلق من على حافّة الشاشة، وسايب لك الصفحة باينة وراه.
<Empty> / noRowsOverlayلمّا ميبقاش فيه حاجة تتعرض، الشاشة اللي بتقابلك لازم برضه تقول لك تعمل إيه دلوقتي.
<button> / role="option"الكبسولة الصغيرة اللي تدوس عليها عشان تفلتر بيها، وتشيلها من الـ × اللي في طرفها.
role="switch"المفتاح اللي أول ما تدوس عليه يشتغل على طول. مفيش زرار «حفظ» ولا انتظار.
<nav aria-label="pagination">صفّ الأرقام اللي تحت النتايج. الفرق بينه وبين السكرول اللانهائي إن الصفحة ٧ ليها لينك تقدر تبعته لزميلك.
role="dialog" aria-modal="true"النافذة اللي بتعتّم الصفحة وراها وتقول لك: خلّص اللي هنا الأول.
<select> / role="listbox"الخانة اللي فيها سهم لتحت: تدوس عليها تنزل لك لستة وتختار منها واحد.
role="tooltip" + aria-describedbyالفقاعة الصغيرة اللي بتطلع لما تحطّ المؤشّر على أيقونة وتقول لك دي بتعمل إيه.
role="tablist"صفّ العناوين اللي تدوس على واحد فيهم، فيتغيّر اللي تحته من غير ما الصفحة تروح وتيجي.
aria-current="step"الدواير المرقّمة اللي فوق الفورم وبتقول لك إنت في خطوة كام من كام.
aria-busy="true"الشكل الرمادي بتاع الصفحة اللي بيبان قبل ما الداتا توصل، وبتعدّي عليه لمعة.
aria-expanded + aria-controlsعناوين فوق بعض، لما تدوس على واحد يفتح المحتوى اللي تحته، وغالباً يقفل اللي كان مفتوح قبله.
role="status"المستطيل الصغير اللي بيطلع في الركن ويقول «تم الحفظ» وبعدين يختفي لوحده.
aria-current="page"صفّ الروابط الصغير فوق العنوان اللي بيقول لك أنت فين في الموقع.
كل عنصر معاه قسم RTL
إيه اللي بينعكس لما الصفحة تبقى من اليمين لليسار، وإيه اللي ممنوع ينعكس، وأنهي خاصية CSS منطقية تستخدمها بدل left و right. دي المعلومة اللي بتضيع وقت المطوّر العربي كل يوم.
دليل RTL