الفئات والأنماط الديناميكية
اربطوا الفئات والأنماط بطريقة تفاعلية
الفئات والأنماط الديناميكية درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
التنسيق الديناميكي في القوالب
يتيح لكم Angular ربط الفئات والتنسيقات المضمّنة بحالة المكوّن، بحيث تُحدّث واجهة المستخدم تلقائيًا عند تغيّر البيانات.
ربط فئة واحدة
استخدموا [class.name] لتبديل فئة CSS واحدة استنادًا إلى تعبير منطقي.
<div [class.active]="isActive">Item</div>
// component
isActive = true;فئات متعددة باستخدام ngClass
يطبّق ngClass عدة فئات في آن واحد، باستخدام كائن يربط أسماء الفئات بقيم منطقية.
<div [ngClass]="{ active: isActive, disabled: isDisabled }">
Item
</div>استخدام ngClass مع المصفوفات والسلاسل
يقبل ngClass أيضًا سلسلةً من أسماء الفئات أو مصفوفة.
<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>ربط تنسيق واحد
استخدموا [style.property] لربط خاصية CSS مضمّنة واحدة بقيمة.
<p [style.color]="textColor">Hello</p>
// component
textColor = "tomato";ربط التنسيقات مع الوحدات
أضيفوا لاحقة وحدة لربط القيم الرقمية بوحدات مثل البكسل أو النسبة المئوية.
<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>
// component
boxWidth = 200;
boxHeight = 50;تنسيقات متعددة باستخدام ngStyle
يعيّن ngStyle عدة تنسيقات مضمّنة في آن واحد انطلاقًا من كائن.
<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
Styled
</div>يفوز ربط الفئة عند التعارض
عند تداخل الفئات الثابتة والمربوطة، يدمجها Angular؛ ويتحكم الربط في وجود الفئة الديناميكية من دون إزالة الفئات الثابتة.
<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->الاستجابة للحالة
تُعاد في bindings أثناء اكتشاف التغييرات، لذلك تؤدي أيّ خاصية في المكوّن تُحدَّث إلى إعادة تنسيق العنصر فورًا.
toggle() {
this.isActive = !this.isActive;
}اختيار الفئة أم التنسيق
فضّلوا ربط الفئات مع قواعد CSS لتسهيل الصيانة، وخصّصوا ربط التنسيقات المباشر للقيم الديناميكية فعلًا، مثل العرض أو اللون المحسوب.
مع Signals
يعمل ربط الفئات والتنسيقات مع Signals أيضًا؛ ما عليكم سوى استدعاء signal في تعبير القالب.
<div [class.active]="isActive()"></div>
// component
isActive = signal(true);تحقق سريع
اختبروا مدى فهمكم للفئات والتنسيقات الديناميكية.
مراجعة
بدّلوا فئة واحدة باستخدام [class.name] أو عدة فئات باستخدام ngClass؛ وعيّنوا تنسيقًا واحدًا باستخدام [style.prop] (مع وحدة اختيارية) أو عدة تنسيقات باستخدام ngStyle. تستجيب عمليات الربط للحالة تلقائيًا، بما في ذلك Signals.
الأسئلة الشائعة
هل درس «الفئات والأنماط الديناميكية» مجاني؟
نعم — نص درس «الفئات والأنماط الديناميكية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «الفئات والأنماط الديناميكية»؟
اربطوا الفئات والأنماط بطريقة تفاعلية تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «الفئات والأنماط الديناميكية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الأنماط الخاصة بنطاق المكوّن
- أوضاع تغليف العرض
- تنسيق Host وHost-Context
- الفئات والأنماط الديناميكية