BlazorStylesheet

ورقة بليزورستايبل

يتيح Blazorstylesheeteet مطوري Blazor ( Blazor Server و Webassembly و Maui Blazor) لكتابة أنماط CSS الخاصة بهم مباشرة في C# دون الحاجة إلى أوراق الأنماط الخارجية.

تم تصميم Blazorstylesheet على رأس ورقة الأنماط .

STYLESHEET.NET هي مكتبة .NET عبر منصة مصممة لمطوري C# و VB.NET و F#. يمكّن المطورين من كتابة أنماط CSS مباشرة في الكود الخاص بهم ، مما يلغي الحاجة إلى ملفات أوراق الأنماط الخارجية. يوفر STYLESHEET.NET تطبيقات مكتوبة مسبقًا لجميع خصائص CSS ، وحدات AT ، والكلمات الرئيسية ، والعناصر الأخرى ، مما يلغي الحاجة إلى تبعيات إضافية.

STYLESHERET.NET ليست مكتبة من الخارج. إنها مكتبة مفتوحة المصدر (MIT) كتبتها وأحافظ عليها.

المستودع : https://github.com/abdisamadmoh/stylesheet.net

أوصيك بإلقاء نظرة وفهم كيفية استخدام ورقة الأنماط . انقر على الرابط أعلاه وقراءة الوثائق.

بداية سريعة

لبدء استخدام ورقة BlazorstyleShep ، نحتاج أولاً إلى إضافتها في مشروعنا.

يمكننا إضافته من nuget ، أو الرجوع مباشرة

افتح nuget Package Manager في Visual Studio وقم بصق الكود التالي.

 Install - Package BlazorStylesheet - Version 1.0 .0

1. بعد الانتهاء من التثبيت ، افتح برنامج الملف.

   أضف الرمز التالي

    using BlazorStylesheet ;
   builder . Services . AddStylesheet ( ) ;

2. افتح الملف _imports.Razor . في Blazor Server و Webassembly ، يمكنك العثور عليه ضمن جذر المشروع. بالنسبة إلى Maui ، يمكنك العثور عليه تحت مجلد المكونات .

أضف مساحات الأسماء التالية

 @using BlazorStylesheet
@using StylesheetNET

3. افتح الآن _layout.cshtml في Blazor Server والذي يمكنك العثور عليه ضمن مجلد مشترك ، أو index.html في Blazor Webassembly و Maui والتي يمكنك العثور عليها ضمن مجلد wwwroot .

   أضف علامات HTML التالية في الرأس قبل أي نص أو أنماط.

    < link href =" _content/BlazorStylesheet/fix.min.css " rel =" stylesheet " />
   < script src =" _content/BlazorStylesheet/BlazorStylesheet.js " > </ script >

   الآن قم بالتمرير لأعلى ، في العلامة <htm ...> أضف loading = "loader" . سأشرح لماذا نحتاج إلى هذه العلامات والسمات في الأقسام اللاحقة (انظر القسم "لماذا نحتاج ...").

    loading = "loader"
    OR
   loading = ""

4. وأخيراً ، في Blazor Server و Blazor Webassembly Open App.Razor الذي يمكنك العثور عليه ضمن جذر المشروع. وفي Maui ، Open Routes.Razor التي يمكنك العثور عليها تحت مجلد المكونات .

   لف كل ما تراه هناك مع:

   < RazorStylesheet > </ RazorStylesheet >

عليك أن تكمل كل خطوة مذكورة أعلاه.

الآن نحن على استعداد لكتابة أول CSS في C#.

في mainlayout.razor لدينا ، دعونا حقن sheet الأنماط الرئيسية ونطلق عليها. ثم يمكننا استخدام خاصية sheet لكتابة CSS لدينا. يمكنك القيام بذلك في كل مكون تريد الوصول إلى ورقة الأنماط الرئيسية .

الآن انسخ الكود التالي واللصق في Mainlayout.Razor C# الكود.

 [ Inject ]
 public Stylesheet sheet
 {
     get ; set ;
 }

 protected override void OnAfterRender ( bool firstRender )
 {
    base . OnAfterRender ( firstRender ) ;

    if ( firstRender )
    {
        sheet [ "body" ] . BackgroundColor = "blue" ;
        sheet . Build ( ) ;
    }

 }

الآن قم ببناء تطبيقك وتحديث المتصفح. سترى أن جسم HTML الخاص بك أصبح اللون blue .

لمعرفة كيفية كتابة ورقة الأنماط الخاصة بك في C# يرجى الرجوع إلى https://github.com/abdisamadmoh/stylesheet.net#quick-start

للوصول إلى sheet في مكونات أخرى ، inject ورقة stylesheet ، وبعد الخطوة 4 أعلاه.

كلما قمت بتغيير شيء ما في stylesheet الخاصة بك ، يجب عليك الاتصال sheet.Build() لتعكس التغييرات في DOM .

هكذا يمكنك الوصول إلى stylesheet الخاصة بك في مكوناتك. لكن كتابة CSS بالكامل في مكون ليست فكرة جيدة لأن ذلك يجعل رموز المكون غير قابلة للقراءة.

Infact لا يوجد خطأ في كتابة CSS في مكوناتك. لكن من الجيد الكتابة في classes منفصلة. سنفعل ذلك في القسم التالي. كما سنتعلم متى يجب أن نكتب CSS لدينا في مكون.

دعنا نبني تطبيق العالم الحقيقي

الآن يتيح Cretate قائمة Navbar التالية.

1. قم بإنشاء مكون جديد واسمه navbar.razor .

2. الصق رمز html التالي في navbar.razor الذي أنشأته.

< nav class = " navbar " >
    < a href = " # " class = " selected " >Home</ a >
    < a href = " # " >About</ a >
    < a href = " # " >Blog</ a >
    < a href = " # " >Portefolio</ a >
    < a href = " # " >Contact</ a >
</ nav >

3. أضف navbar.razor الذي أنشأته إلى mainlayout.razor أو في أي مكون آخر تريده.

4. الآن دعنا ننشئ CSS في C#. قم بإنشاء فئة جديدة واتصل بها Style.cs وأضف هاتين مساحات الأسماء.

 using BlazorStylesheet ;
using StylesheetNET ;

الآن ، قد يبدو فصلنا بعض الشيء مثل هذا:

 public class Style
{
}

لكن هذا مجرد فئة بسيطة ، ولا يتعرف عليها ورقة BlazorstyleShep . نحتاج إلى الإشارة إلى أن هذه الفئة مخصصة لورقة الأنماط . يمكننا أن نفعل ذلك ببساطة عن طريق تزيينه مع سمة [StylesheetClass] مثل هذا:

 [ StylesheetClass ]
public class Style
{ 
}

الآن ، عندما ندير تطبيقنا ، سوف يتعرف BlazorstyleShegth على فصلنا وتجميعه إلى CSS.

الآن دعنا نكتب بعض CSS في فصلنا. لكن اكتب أين؟

حسنًا ، دعنا نضيف طريقة وتسمية Setup وتزيينها باستخدام [StylesheetMethod] مثل هذا:

 [ StylesheetMethod ]
private void Setup ( )
{

}

عندما نقوم بتشغيل تطبيقنا مرة أخرى وتجد Blazorstylesheet صفنا ، فإنه سيبحث عن طريقة Setup الخاصة بنا وينفذها.

Infact ، يتم تنفيذ طريقة Setup الخاصة بنا ، ليس لأنه يطلق عليه Setup ولكن ورقة BlazorstyleShep تبحث عن أي طرق غير معلمة تم تزيينها مع سمة [StylesheetMethod] وتنفيذها. هذا يعني أنه يمكن أن يكون لدينا العديد من الأساليب كما نريد وتسمية أي أسماء نريد.

 [ StylesheetMethod ]
public void method1 ( )
{
    // will be executed
} 

public method2 ( )
{
    // will not be executed because it is missing [StylesheetMethod]
   // BlazorStylesheet will ignore it.
} 


[ StylesheetMethod ]
public void method3 ( object parameter )
{
    // will throw an exception error 
   // bacause a method with [StylesheetMethod]
   // should not have any parameter. 
}

ولكن لا يزال ، كيف من المفترض أن نكتب CSS لدينا؟

حسنًا ، لكتابة CSS لدينا ، نحتاج إلى الوصول إلى ورقة الأنماط الرئيسية . ورقة الأنماط الرئيسية هي ورقة الأنماط التي تعمل مثل ملف ورقة الأنماط لموقعنا. يتم إنشاؤه عندما يقوم المتصفح بتحميل موقعنا على الويب. ومتوفر عبر موقعنا على الويب وهو ثابت ، وهذا يعني أنه لا يتم إعادة إنشائه مرة أخرى حتى يتم تحديث المتصفح.

في مكونات الحلاقة ، يمكننا الوصول إليها من خلال الحقن.

ولكن للوصول إلى ورقة الأنماط الرئيسية في فصلنا ، يتعين علينا إضافة خاصية من Stylesheet الأنماط وتزيينها بـ [StylesheetProperty] . يمكننا تسميته كل ما نريده. لهذا المثال ، سنقوم بتسمية sheet .

 [ StylesheetClass ]
 public class Style
 {
     [ StylesheetProperty ]
     private Stylesheet sheet
     {
         get ;
         set ;
     }
 }

الآن ، sheet هي إشارة إلى ورقة الأنماط الرئيسية لدينا. ويمكننا استخدامه لكتابة CSS لدينا.

ستبحث BlazorStylesheet عن أي خاصية ذات سمة [StylesheetProperty] والرجوع إليها إلى ورقة الأنماط الرئيسية .

الآن ، للتحقق مما إذا كان كل شيء يعمل كما هو متوقع. لنقدم red background color جسم موقعنا الأحمر.

يجب أن تبدو فئة Style.cs .

 [ StylesheetClass ]
 public class Style
 {
     [ StylesheetProperty ]
     public Stylesheet sheet
     {
         get ;
         set ;
     }

     [ StylesheetMethod ]
     private void MakeBodyRed ( )
     {
         sheet [ "body" ] = new Element ( )
         {
             BackgroundColor = "red !important"
         } ;
       //You can also write like this: 
       // sheet["body"].BackgroundColor = "red !important";
      // But the way i wrote is recommended and cleaner if you are not updating.
     }
 }

الآن قم ببناء تطبيقك وتحديث المتصفح. يجب أن يكون جسم موقع الويب الخاص بك أحمر.

في ماوي ، قد تواجه هذا الخطأ:

'Element' is an ambiguous reference between 'Microsoft.Maui.Controls.Element' and 'StylesheetNET.Element'

لأن كل من Microsoft.Maui.Controls و StylesheetNET لهما فئة Element .

لإصلاح ، أضف مساحة الاسم التالية:

 using Element = StylesheetNET . Element ; 

إذا كان كل شيء يسير على ما يرام ، دعنا نكتب CSS لـ Navbar.razor

على الرغم من أنه يمكنك كتابة CSS على أي حال تريدها ، ولكن من الجيد تصنيفها بطرق. هذا ما سنفعله هنا.

الآن دعونا نكتب CSS الكاملة لدينا. هنا رمز C# الكامل.

  [ StylesheetClass ]
  public class Style
  {
      [ StylesheetProperty ]
      private Stylesheet sheet
      {
          get ;
          set ;
      }

      [ StylesheetMethod ]
      private void NavBar ( )
      {
          sheet [ ".navbar" ] = new Element ( )
          {

              Position = PositionOptions . Relative ,
              Width = "590px" ,
              Height = "60px" ,
              PaddingLeft = "10px" ,
              PaddingRight = "10px" ,
              BackgroundColor = "#34495e" ,
              BorderRadius = "8px" ,
              FontSize = "0"
          } ;
      }
      [ StylesheetMethod ]
      private void NavBar_a ( )
      {
          sheet [ ".navbar > a" ] = new Element ( )
          {
              LineHeight = "50px" ,
              Height = "100%" ,
              Width = "100px" ,
              FontSize = "15px" ,
              Display = DisplayOptions . InlineBlock ,
              Position = PositionOptions . Relative ,
              ZIndex = "1" ,
              TextDecoration = "none" ,
              TextTransform = TextTransformOptions . Uppercase ,
              TextAlign = TextAlignOptions . Center ,
              Color = "white" ,
              Cursor = CursorOptions . Pointer
          } ;
      }
      [ StylesheetMethod ]
      private void NavBar_a_Selected ( )
      {
          sheet [ ".navbar > a.selected" ] = new Element ( )
          {
              BackgroundColor = "#17B1EA" ,
              BorderRadius = "10px"

          } ;
      }
      [ StylesheetMethod ]
      private void NavBar_a_Selected_Hover ( )
      {
          sheet [ ".navbar > a" ] = new ElementHover ( )
          {
              BackgroundColor = "#17B1EA" ,
              BorderRadius = "10px" ,
              Transition = "border-radius" ,
              TransitionDuration = ".3s" ,
              TransitionTimingFunction = TransitionTimingFunctionOptions . EaseIn

          } ;
      }
      [ StylesheetMethod ]
      void Animation ( )
      {
          sheet [ "h1" ] = new Element ( )
          {
              AnimationName = "pulse" ,
              AnimationDuration = "2s" ,
              AnimationIterationCount = AnimationIterationCountOptions . Infinite
          } ;

          sheet [ AtRuleType . Keyframes ] = new Keyframes ( "pulse" )
          {
              [ "from" ] = new Keyframe ( )
              {
                  Opacity = "1.0"
              } ,
              [ "to" ] = new Keyframe ( )
              {
                  Opacity = "0"
              }
          } ;
      }
      //Media Query for Mobile Devices
      // @media (max-width: 480px) 
      [ StylesheetMethod ]
      void ForMobile ( ) //Make body red for mobile phones
      {
          sheet [ AtRuleType . MediaQuery ] = new MediaQuery ( new AtRule ( ) . MaxWidth ( "480px" ) )
          {
              [ "body" ] = new Element ( )
              {
                  BackgroundColor = "red"
              }
          } ;
      }
      // Media Query for low resolution  Tablets, Ipads
      // @media (min-width: 481px) and (max-width: 767px)
      [ StylesheetMethod ]
      void ForTablet ( ) //Make body yellow for Tablets, Ipads
      {
          sheet [ AtRuleType . MediaQuery ] = new MediaQuery ( new AtRule ( ) . MinWidth ( "481px" ) . And . MaxWidth ( "767px" ) )
          {
              [ "body" ] = new Element ( )
              {
                  BackgroundColor = "yellow"
              }
          } ;
      }

      // Media Query for Laptops and Desktops
      // @media (min-width: 1025px) and (max-width: 1280px)
      [ StylesheetMethod ]
      void ForDesktop ( ) //Make body gren for Laptops and Desktops
      {
          sheet [ AtRuleType . MediaQuery ] = new MediaQuery ( new AtRule ( ) . MinWidth ( "1025px" ) . And . MaxWidth ( "1280px" ) )
          {
              [ "body" ] = new Element ( )
              {
                  BackgroundColor = "green"
              }
          } ;
      }
  }

بصرف النظر عن أسلوب Navbar.razor ، أضفنا أيضًا استعلامات الوسائط للهاتف المحمول والأجهزة اللوحية وسطح المكتب حيث نغير لون خلفية body لكل منهما. أضفنا أيضًا الرسوم المتحركة تسمى flash لعناصر h1 .

هكذا يمكنك أن تكتب لك CSS في الفصول في C# باستخدام ورقة BlazorstyleSh . باتباع هذه الطريقة ، يمكنك الحصول على العديد من الفصول كما تريد. في نهاية اليوم ، سيتم تجميع جميعهم في ملف ورقة واحدة.

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

هنا ، لم أغطي تعليميًا كاملاً حول كيفية كتابة CSS في C# باستخدام ورقة BlazorstyleSh . نظرًا لأن هذه المكتبة تستخدم مكتبة EstlesHeet.net ، التي لديها برنامج تعليمي شامل ، يمكنك الرجوع إلى الرابط أدناه للحصول على إرشادات مفصلة حول كتابة CSS في C#.

المستودع : https://github.com/abdisamadmoh/stylesheet.net

متى وكيف تكتب CSS في المكونات؟

مع ورقة Blazorstyles ، لدينا حرية كتابة CSS في أي مكان في مشروع Blazor لدينا. هذا مفيد للحفاظ على الأنماط الخاصة بمكون معين وتحديث CSS لدينا في الوقت الفعلي. ولكن تذكر أنه بالنسبة للأساليب أو الأنماط الكبرى المستخدمة عبر تطبيقك بالكامل ، من الأفضل عمومًا تنظيمها في فصول C# منفصلة. هذا يجعل الكود الخاص بك أسهل في إدارة.

على عكس الفصول الدراسية ، التي يمكننا الوصول إلى ورقة الأنماط الرئيسية من خلال زخرفة السمة التي تتم إدارتها للحقن بواسطة ورقة BlazorstyleSheal نفسها. في المكونات ، يمكننا الوصول إلى ورقة الأنماط الرئيسية من خلال الحقن التي توفرها حاوية حقن التبعية (DI) التي توفرها .NET.

في مكوناتك ، استخدم @Inject . ضعه في أعلى ملف الحلاقة .

 @inject Stylesheet sheet

ثم يمكنك استخدام sheet في المكون الخاص بك.

 protected override void OnAfterRender ( bool firstRender )
 {
     base . OnAfterRender ( firstRender ) ;
     if ( firstRender )
     {
         sheet [ "body" ] . BackgroundColor = "blue" ;
         sheet . Build ( ) ;
     }
 }

في المكونات أو الأماكن الأخرى التي لا تديرها ورقة BlazorstyleShep ، يجب عليك الاتصال sheet.Build() عندما تقوم بتغيير شيء ما في ورقة الأنماط لتعكس التغييرات.

لا تحتاج إلى استدعاء StateHasChanged() لأن ذلك ليس له أي تأثير على ورقة البلازورستايكل .

لماذا نحتاج ...

loading="loader" سمة في <html loading="loader"> و fix.css ؟

تعتمد Blazorstylesheet على وقت تشغيل JavaScript (JSRuntime) المقدمة من Blazor. JSRuntime ليس جاهزًا حتى يتم تحميل الصفحة بأكملها. هذا يعني أن ورقة Blazorstylesheet يجب أن تنتظر حتى Jsruntime جاهزة لإرسال CSS المترجمة إلى Clientside.

سيؤدي ذلك إلى إنشاء مشكلة لا يتم فيها تصميم موقع الويب الخاص بك حتى يتم تحميل كل شيء. يمكنك إصلاح هذه المشكلة إما عن طريق إظهار محمل أو عدم عرض موقع الويب حتى يكون CSS جاهزًا ويتم تصميم موقع الويب.

يكمن كلا الحللين في ملف fix.css الذي أضفته.

لعرض Loader أثناء استعداد موقع الويب ، أضف سمة HTML التالية في علامة HTML الخاصة بك.

 < html loading =" loader " >

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

 < html loading ="" >

لا تضيف ورقة Blazorstylesheet أي عنصر إلى DOM لإنشاء المحمل. لذلك يجب ألا تقلق بشأن تعديل DOM الخاص بك.

أكثر...

تستخدم هذه المكتبة ورقة الأنماط التي يمكنك العثور عليها في المستودع أدناه

المستودع : https://github.com/abdisamadmoh/stylesheet.net