หน้าแรก>ซอร์สโค้ด .NET>หมวดหมู่อื่นๆ
ดาวน์โหลด

blazorstylesheet

Blazorstylesheet อนุญาตให้นักพัฒนา BLAZOR ( Blazor Server , WebAssembly และ Maui Blazor) เขียนสไตล์ CSS ของพวกเขาโดยตรงใน C# โดยไม่จำเป็นต้องใช้สไตล์ชีทภายนอก

Blazorstylesheet ถูกสร้างขึ้นที่ด้านบนของ stylesheet.net

stylesheet.net เป็นห้องสมุดข้ามแพลตฟอร์ม. NET ที่ออกแบบมาสำหรับ C#, vb.net และ F# นักพัฒนา ช่วยให้นักพัฒนาสามารถเขียนสไตล์ CSS โดยตรงในรหัสของพวกเขาไม่จำเป็นต้องใช้ไฟล์ชีทสไตล์ภายนอก Stylesheet.net ให้การใช้งานที่เขียนไว้ล่วงหน้าสำหรับคุณสมบัติ CSS ทั้งหมด, at-rules, คำหลักและองค์ประกอบอื่น ๆ , ไม่จำเป็นต้องมีการพึ่งพาเพิ่มเติม

Stylesheet.net ไม่ใช่ห้องสมุดจากภายนอก มันเป็นห้องสมุดโอเพนซอร์ส (MIT) ที่ฉันเขียนและบำรุงรักษา

ที่เก็บ : https://github.com/abdisamadmoh/stylesheet.net

ฉันอยากจะแนะนำให้คุณดูและเข้าใจวิธีการใช้ Stylesheet.net ก่อนที่คุณจะสามารถสอนต่อไปได้ คลิกลิงก์ด้านบนและอ่านเอกสารประกอบ

https // githubcom/abdisamadmoh/stylesheetnet/raw/master/20240304013616imagepng

เริ่มต้นอย่างรวดเร็ว

ในการเริ่มต้นใช้ Blazorstylesheet เราต้องเพิ่มในโครงการของเราก่อน

เราสามารถเพิ่มได้จาก Nuget หรืออ้างอิงโดยตรง blazorstylesheet.dll

เปิด nuget Package Manager ใน Visual Studio และวางรหัสต่อไปนี้ 

 Install - Package BlazorStylesheet - Version 1.0 .0

  1. หลังจากการติดตั้งเสร็จสิ้นให้เปิดไฟล์ program.cs หรือ startup.cs หรือ mauiprogram.cs ในโครงการ Blazor ของคุณ

    เพิ่มรหัสต่อไปนี้ 

     using BlazorStylesheet ;
builder . Services . AddStylesheet ( ) ;

  2. เปิดไฟล์ _imports.razor ใน Blazor Server และ WebAssembly คุณสามารถค้นหาได้ภายใต้รูทโครงการ สำหรับ Maui คุณสามารถค้นหาได้ภายใต้โฟลเดอร์ Components

เพิ่มเนมสเปซต่อไปนี้ 

 @using BlazorStylesheet
@using StylesheetNET

  1. ตอนนี้เปิด _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 = ""

  2. และสุดท้ายใน Blazor Server และ Blazor WebAssembly Open App.razor ซึ่งคุณสามารถค้นหาได้ภายใต้ รูท โครงการ และใน Maui เปิด เส้นทาง RAZOR ซึ่งคุณสามารถค้นหาได้ภายใต้โฟลเดอร์ Components

    ห่อทุกสิ่งที่คุณเห็นด้วย: 

    < 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 ของคุณในส่วนประกอบของคุณ แต่การเขียน CS ทั้งหมดของคุณในส่วนประกอบไม่ใช่ความคิดที่ดีเพราะทำให้รหัสส่วนประกอบของคุณไม่สามารถอ่านได้

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 >

  1. เพิ่ม navbar.razor ที่คุณสร้างขึ้นเพื่อ mainlayout.razor หรือในองค์ประกอบอื่น ๆ ที่คุณต้องการ

  2. ตอนนี้ให้สร้าง CSS ของเราใน C# สร้างคลาสใหม่และเรียกมันว่า Style.cs และเพิ่มเนมสเปซทั้งสองนี้ 

 using BlazorStylesheet ;
using StylesheetNET ;

ตอนนี้ชั้นเรียนของเราอาจดูแบบนี้: 

 public class Style
{
}

แต่นั่นเป็นเพียงคลาสที่เรียบง่ายและ Blazorstylesheet ไม่รู้จักมัน เราจำเป็นต้องระบุว่าคลาสนี้ใช้สำหรับ สไตล์ชีท เราสามารถทำได้โดยเพียงแค่ตกแต่งด้วยแอตทริบิวต์ [StylesheetClass] เช่นนี้: 

 [ StylesheetClass ]
public class Style
{ 
}

ตอนนี้เมื่อเราเรียกใช้แอปพลิเคชันของเรา Blazorstylesheet จะรับรู้ชั้นเรียนของเราและรวบรวมเป็น CSS

ตอนนี้เรามาเขียน CSS ในชั้นเรียนของเรากันเถอะ แต่เขียนที่ไหน?

ให้เพิ่มวิธีการและตั้งชื่อ Setup และตกแต่งด้วย [StylesheetMethod] เช่นนี้: 

 [ StylesheetMethod ]
private void Setup ( )
{

}

เมื่อเราเรียกใช้แอปพลิเคชันของเราอีกครั้งและ Blazorstylesheet ค้นหาคลาสของเรามันจะมองหาวิธี Setup ของเราและดำเนินการ

Infact วิธี Setup ของเราถูกดำเนินการไม่ใช่เพราะมันเรียกว่า Setup แต่ Blazorstylesheet มองหาวิธีการที่ไม่มีพารามิเตอร์ใด ๆ ที่ตกแต่งด้วยแอตทริบิวต์ [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] และอ้างอิงพวกเขาไปยัง Main Stylesheet

ตอนนี้เพื่อตรวจสอบว่าทุกอย่างทำงานได้ตามที่คาดไว้หรือไม่ มาให้ 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# โดยใช้ blazorstylesheet ด้วยวิธีนี้คุณสามารถมีชั้นเรียนได้มากเท่าที่คุณต้องการ ในตอนท้ายของวันทั้งหมดของพวกเขาจะถูกรวบรวมเป็นไฟล์ชีทสไตล์เดียว

หากคุณเขียน CSS เดียวกันในสถานที่ต่าง ๆ เช่นชั้นเรียนสิ่งที่ต่อมาจะแทนที่คนที่มีอายุมากกว่าเสมอ ขึ้นอยู่กับลำดับของการดำเนินการและการรวบรวม

ที่นี่ฉันไม่ได้ครอบคลุมการสอนเต็มรูปแบบเกี่ยวกับวิธีการเขียน CSS ใน C# โดยใช้ Blazorstylesheet เนื่องจากไลบรารีนี้ใช้ Library Stylesheet.net ซึ่งมีการสอนที่ครอบคลุมคุณสามารถอ้างถึงลิงก์ด้านล่างสำหรับคำแนะนำโดยละเอียดเกี่ยวกับการเขียน CSS ใน C#

ที่เก็บ : https://github.com/abdisamadmoh/stylesheet.net

เมื่อใดและอย่างไรจะเขียน CSS ในส่วนประกอบ?

ด้วย Blazorstylesheet เรามีอิสระในการเขียน CSS ของเราทุกที่ในโครงการ Blazor ของเรา สิ่งนี้มีประโยชน์สำหรับการรักษารูปแบบเฉพาะสำหรับองค์ประกอบเฉพาะและอัปเดต CS ของเราแบบเรียลไทม์ แต่จำไว้ว่าสำหรับสไตล์หรือสไตล์ที่ใหญ่กว่าที่ใช้ในแอปพลิเคชันทั้งหมดของคุณโดยทั่วไปจะดีกว่าที่จะจัดระเบียบในคลาส C# แยกต่างหาก สิ่งนี้ทำให้รหัสของคุณง่ายต่อการจัดการ

ซึ่งแตกต่างจากคลาสที่เราสามารถเข้าถึง สไตล์ชีทหลัก ผ่านการตกแต่งแอตทริบิวต์ซึ่งการฉีดนั้นได้รับการจัดการโดย blazorstylesheet เอง ใน ส่วนประกอบ เราสามารถเข้าถึง สไตล์ชีทหลัก ผ่านการฉีดที่จัดทำโดยภาชนะ ฉีดพึ่งพา (DI) ที่จัดทำโดย. NET

ในส่วนประกอบของคุณใช้ @Inject วางไว้ด้านบนของไฟล์ มีดโกน ของคุณ 

 @inject Stylesheet sheet

จากนั้นคุณสามารถใช้ sheet ในส่วนประกอบของคุณ 

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

ใน ส่วนประกอบ หรือสถานที่อื่น ๆ ที่ blazorstylesheet ไม่ได้จัดการคุณต้องโทรหา sheet.Build() เมื่อคุณเปลี่ยนบางสิ่งบางอย่างในสไตล์ชีทเพื่อสะท้อนการเปลี่ยนแปลง

คุณไม่จำเป็นต้องโทรหา StateHasChanged() เนื่องจากไม่มีผลต่อ Blazorstylesheet

ทำไมเราต้องการ ...

แอตทริบิวต์ loading="loader" ใน <html loading="loader"> และ fix.css ของเรา?

Blazorstylesheet ขึ้นอยู่กับ JavaScript Runtime (JSRuntime) ที่จัดทำโดย Blazor JSruntime ยังไม่พร้อมจนกว่าจะมีการโหลดทั้งหน้า ซึ่งหมายความว่า Blazorstylesheet ต้องรอจนกว่า JSruntime พร้อมที่จะส่ง CSS ที่รวบรวมไปยังลูกค้า

สิ่งนี้จะสร้างปัญหาที่เว็บไซต์ของคุณไม่ได้มีสไตล์จนกว่าทุกอย่างจะถูกโหลด คุณสามารถแก้ไขปัญหานี้ได้โดยแสดงตัวโหลดหรือไม่แสดงเว็บไซต์จนกว่า CSS จะพร้อมและเว็บไซต์มีสไตล์

โซลูชันทั้งสองอยู่ในไฟล์ fix.css ที่คุณเพิ่ม

เพื่อแสดงตัวโหลดในขณะที่เว็บไซต์กำลังเตรียมพร้อมเพิ่มแอตทริบิวต์ HTML ต่อไปนี้ในแท็ก HTML ของคุณ 

 < html loading =" loader " >

เพื่อไม่แสดงเนื้อหาของเว็บไซต์ในขณะที่เตรียมพร้อมเพิ่มแอตทริบิวต์ HTML ต่อไปนี้ในแท็ก HTML ของคุณ 

 < html loading ="" >

Blazorstylesheet ไม่ได้เพิ่มองค์ประกอบใด ๆ ลงใน DOM เพื่อสร้างตัวโหลด ดังนั้นคุณไม่ควรกังวลว่า DOM ของคุณจะถูกแก้ไข

มากกว่า...

ไลบรารีนี้ใช้ stylesheet.net ซึ่งคุณสามารถค้นหาที่เก็บด้านล่าง

ที่เก็บ : https://github.com/abdisamadmoh/stylesheet.net

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด