SwiftUI Academy · درس

عناصر علامات التبويب والشارات

أضف الأيقونات والعناوين وشارات الإشعارات

عناصر علامات التبويب والشارات درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في SwiftUI Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Polishing Each Tab

Now you will make each tab clearer with the right icon, a short title, and a notification badge when needed. 🎨

Icons with SF Symbols

Pass an SF Symbol name to Label so each tab gets a crisp, scalable icon that matches the system style.

Label("Profile", systemImage: "person.crop.circle")

Keep Titles Short

Tab titles sit in a tight space, so keep them to one clear word like Home, Search, or Profile.

Selected vs Unselected

iOS automatically highlights the active tab. Many symbols even swap to a filled variant when selected, with no code from you.

Choosing Good Symbols

Pick symbols whose meaning is obvious. A house for home and a gear for settings need no explanation.

What a Badge Shows

A badge is the small red bubble on a tab that signals unread items, like new messages waiting for you. 🔴

Adding a Number Badge

The badge modifier puts a count on a tab. Pass a number and the bubble appears automatically.

InboxScreen()
    .tabItem { Label("Inbox", systemImage: "tray") }
    .badge(3)

Text Badges

You can also pass a string to badge, useful for short markers like "New" instead of a count.

.badge("New")

Hiding a Badge

Set the badge to zero or an empty value and SwiftUI hides the bubble, so it appears only when it matters.

.badge(unreadCount)

Driving Badges from State

Bind the badge to a state value so the count updates live as new items arrive or get read.

Badges Demand Attention

Use badges sparingly. A bubble pulls the eye, so reserve it for things the user truly needs to notice. 👀

Quick Check

Let us check how to show an unread count on a tab.

Recap: Tab Items & Badges

Clear icons and short titles make tabs scannable, and the badge modifier surfaces counts or markers right when users need them. 🎉

الأسئلة الشائعة

هل درس «عناصر علامات التبويب والشارات» مجاني؟

نعم — نص درس «عناصر علامات التبويب والشارات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

ماذا ستتعلم في «عناصر علامات التبويب والشارات»؟

أضف الأيقونات والعناوين وشارات الإشعارات تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟

لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «عناصر علامات التبويب والشارات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟

نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى SwiftUI Academy