تمرين - التخصيص باستخدام المعلمات

مكتمل

اللعبة تعمل، ولكن ربما كنت لا تحب الألوان الافتراضية لدينا. في Blazor، يمكننا تحديد المعلمات على مكوناتنا التي تسمح لنا بتمرير القيم التي تبدو مثل السمات على علامة HTML.

في هذا التمرين، نركز على التخصيص وجعل اللعبة تبدو أفضل باستخدام المعلمات.

تخصيص اللوحة باستخدام المعلمات

دعونا نضيف بعض المعلمات للألوان على اللوحة، ونمرر بعض الألوان الأخدودة من صفحة Home.

المعلمات في Blazor هي خصائص على مكون تم تزيينه بسمة Parameter.

1. في Board.razor، دعنا نحدد ثلاث خصائص للون اللوحة ولون كل لاعب. قبل أسلوب OnInitialized، أضف أسطر التعليمات البرمجية التالية:

   [Parameter]
   public Color BoardColor { get; set; } = ColorTranslator.FromHtml("yellow");
   
   [Parameter]
   public Color Player1Color { get; set; } = ColorTranslator.FromHtml("red");
   
   [Parameter]
   public Color Player2Color { get; set; } = ColorTranslator.FromHtml("blue");
   

   نستخدم نوع Color للتأكد من أن القيم التي تم تمريرها إلى مكون اللوحة هي ألوان في الواقع.

2. أضف توجيه @using إلى أعلى ملف Board.razor للإشارة إلى أننا نستخدم محتوى من مساحة الاسم System.Drawing.

   @using System.Drawing
   

3. استخدم المعلمات في كتلة CSS أعلى Board.razor لتعيين قيم متغيرات CSS.

   <HeadContent>
       <style>
           :root {
               --board-bg: @ColorTranslator.ToHtml(BoardColor);
               --player1: @ColorTranslator.ToHtml(Player1Color);
               --player2: @ColorTranslator.ToHtml(Player2Color);
           }
       </style>
   </HeadContent>
   

   لم يكن من المفترض أن يغير هذا التغيير أي شيء في مظهر لوحة اللعبة لدينا.

4. دعونا نعود إلى Home.razor ونضيف بعض المعلمات إلى علامة Board الخاصة بنا ونرى كيف يغيرون اللعبة

   <Board @rendermode="InteractiveServer"
        BoardColor="System.Drawing.Color.Black"
        Player1Color="System.Drawing.Color.Green"
        Player2Color="System.Drawing.Color.Purple" />
   

   أليست هذه لوحة رائعة المظهر؟