BlazorStylesheet

Blazorsylesheet

Blazorsylesheet permet aux développeurs Blazor ( Blazor Server , WebAssembly et Maui Blazor) d'écrire leurs styles CSS directement en C # sans avoir besoin de feuilles de style externes.

BLAZORSTYLESHEET est construit sur Stylesheet.net .

Stylesheet.net est une bibliothèque .NET multiplateforme conçue pour les développeurs C #, VB.NET et F #. Il permet aux développeurs d'écrire des styles CSS directement dans leur code, éliminant le besoin de fichiers de feuille de style externe. StylesHeet.net fournit des implémentations pré-écrites pour toutes les propriétés CSS, les rubriques, les mots clés et les autres éléments, éliminant le besoin de dépendances supplémentaires.

Stylesheet.net n'est pas une bibliothèque de l'extérieur. Il s'agit d'une bibliothèque open source (MIT) que j'ai écrite et entretenue.

Référentiel : https://github.com/abdisamadmoh/stylesheet.net

Je vous recommande de jeter un œil et de comprendre comment utiliser Stylesheet.net avant de pouvoir continuer ce tutoriel. Cliquez sur le lien ci-dessus et lisez les documentations.

Démarrage rapide

Pour commencer à utiliser Blazorstylesheet , nous devons d'abord l'ajouter dans notre projet.

Nous pouvons l'ajouter de Nuget , ou référençant directement Blazorstylesheet.dll

Ouvrez nuget Package Manager dans Visual Studio et collez le code suivant.

 Install - Package BlazorStylesheet - Version 1.0 .0

1. Une fois l'installation terminée, ouvrez le fichier programme.cs ou startup.cs ou mauprogram.cs dans votre projet Blazor.

   Ajouter le code suivant

    using BlazorStylesheet ;
   builder . Services . AddStylesheet ( ) ;

2. Ouvrez le fichier _import.razor . Dans Blazor Server et WebAssembly, vous pouvez le trouver sous la racine du projet. Pour Maui , vous pouvez le trouver dans le dossier Composants .

Ajouter les espaces de noms suivants

 @using BlazorStylesheet
@using StylesheetNET

3. Open Open _layout.cshtml dans Blazor Server que vous pouvez le trouver dans le dossier partagé , ou index.html dans Blazor WebAssembly et Maui que vous pouvez le trouver dans le dossier wwwroot .

   Ajoutez les balises HTML suivantes dans la tête avant tout script ou styles.

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

   Maintenant, faites défiler vers le haut, dans la balise <htm ...> Ajoutez un chargement = "chargeur" . Je vais expliquer pourquoi nous avons besoin de ces balises et attributs dans les sections ultérieures (voir la section «Pourquoi nous avons besoin ...»).

    loading = "loader"
    OR
   loading = ""

4. Et enfin, dans Blazor Server et Blazor WebAssembly Open App.razor que vous pouvez trouver sous la racine du projet. Et à Maui , Open Routes.razor que vous pouvez trouver dans le dossier Composants .

   Enveloppez tout ce que vous voyez là-bas:

   < RazorStylesheet > </ RazorStylesheet >

Vous devez terminer chaque étape mentionnée ci-dessus.

Nous sommes maintenant prêts à écrire notre premier CSS en C #.

Dans notre mainlayout.razor , injectons la feuille de style principale et appelons- sheet . Ensuite, nous pouvons utiliser une propriété sheet pour écrire notre CSS. Vous pouvez le faire dans chaque composant que vous souhaitez accéder à la feuille de style principale .

Copiez maintenant le code suivant et collez dans le code c # mainlayout.razor .

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

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

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

 }

Créez maintenant votre application et actualisez le navigateur. Vous verrez que votre corps HTML est devenu de couleur blue .

Pour apprendre à écrire votre feuille de style en C #, veuillez vous référer à https://github.com/abdisamadmoh/stylesheet.net#quick-start

Pour accéder sheet dans d'autres composants, inject leur la stylesheet , en suivant l'étape 4 ci-dessus.

Chaque fois que vous changez quelque chose dans votre stylesheet , vous devez appeler sheet.Build() pour refléter les changements dans le DOM .

C'est ainsi que vous pouvez accéder à votre stylesheet dans vos composants. Mais écrire tout votre CSS dans un composant n'est pas une bonne idée car cela rend votre codes de composant illisible.

En fait, il n'y a rien de mal à écrire votre CSS dans vos composants. Mais c'est une bonne idée d'écrire dans des classes séparées. Nous le ferons dans la section suivante. Nous apprendrons également quand nous devrions écrire notre CSS dans un composant.

Permet de construire une application du monde réel

Permet maintenant de créter le menu Navbar suivant.

1. Créez un nouveau composant et nommez- le Navbar.razor .

2. Collez le code html suivant dans le Navbar.razor que vous avez créé.

< 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. Ajoutez le navbar.razor que vous avez créé sur mainlayout.razor ou dans tout autre composant souhaité.

4. Permet maintenant de créer notre CSS en C #. Créez une nouvelle classe et appelez- Style.cs et ajoutez ces deux espaces de noms.

 using BlazorStylesheet ;
using StylesheetNET ;

Maintenant, notre classe peut ressembler à ceci:

 public class Style
{
}

Mais c'est juste une classe simple, et Blazorstylesheet ne le reconnaît pas. Nous devons indiquer que cette classe est pour Stylesheet . Nous pouvons le faire en le décorant simplement avec un attribut [StylesheetClass] comme ceci:

 [ StylesheetClass ]
public class Style
{ 
}

Maintenant, lorsque nous exécutons notre application, Blazorstylesheet reconnaîtra notre classe et la compilera en CSS.

Maintenant, écrivons des CSS dans notre classe. Mais écrivez où?

Eh bien, ajoutons une méthode et nommez Setup et décorez-la avec [StylesheetMethod] comme ceci:

 [ StylesheetMethod ]
private void Setup ( )
{

}

Lorsque nous exécutons à nouveau notre application et que BlazorsTylesHeet trouve notre classe, il recherchera notre méthode Setup et l'exécute.

En fait, notre méthode Setup est exécutée, non pas parce qu'elle est appelée Setup , mais BlazorstylesHeet recherche toutes les méthodes sans paramètre décorées d'attribut [StylesheetMethod] et les exécute. Cela signifie que nous pouvons avoir autant de méthodes que nous le souhaitons et nommer les noms que nous voulons.

 [ 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. 
}

Mais encore, comment nous censés écrire notre CSS?

Eh bien, pour écrire notre CSS, nous devons avoir un accès à notre feuille de style principale . La feuille de style principale est la feuille de style qui agit comme le fichier de feuille de style de notre site Web. Il est créé lorsque le navigateur charge notre site Web. Et il est disponible sur tout notre site Web et il est constant, ce qui signifie qu'il ne reçoit plus jamais de recréer jusqu'à ce que le navigateur soit rafraîchi.

Dans les composants du rasoir, nous pouvons y accéder par injection.

Mais pour accéder à la feuille de style principale de notre classe, nous devons ajouter une propriété de type Stylesheet et la décorer avec [StylesheetProperty] . Nous pouvons le nommer quel que soit le nom que nous voulons. Pour cet exemple, nous allons le nommer sheet .

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

Maintenant, sheet est une référence à notre feuille de style principale . Et nous pouvons l'utiliser pour écrire notre CSS.

BLAZORSTYLESHEET recherchera n'importe quelle propriété avec l'attribut [StylesheetProperty] et les fera référence à la feuille de style principale .

Maintenant, pour vérifier si tout fonctionne comme prévu. Donnons red background color du corps de notre site Web.

Votre classe Style.cs devrait ressembler à ceci pour l'instant.

 [ 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.
     }
 }

Créez maintenant votre application et actualisez le navigateur. Le corps de votre site Web doit être rouge.

Dans Maui , vous pouvez rencontrer cette erreur:

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

Parce que Microsoft.Maui.Controls et StylesheetNET ont une classe Element .

Pour corriger, ajoutez l'espace de noms suivant:

 using Element = StylesheetNET . Element ; 

Si tout va bien, écrivons le CSS pour notre Navbar.razor

Bien que vous puissiez écrire votre CSS en toute façon, vous le souhaitez, mais il est bon de les classer dans les méthodes. C'est ce que nous ferons ici.

Maintenant, écrivons notre CSS complet. Voici le code C # complet.

  [ 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"
              }
          } ;
      }
  }

Outre le style de Navbar.razor , nous avons également ajouté des requêtes multimédias pour mobile , tablette et bureau où nous modifions la couleur d'arrière-plan du body pour chacun. Nous avons également ajouté l'animation appelée flash pour les éléments h1 .

C'est ainsi que vous pouvez vous écrire CSS dans les classes en C # en utilisant Blazorstylesheet . Suivant de cette façon, vous pouvez avoir autant de cours que vous le souhaitez. À la fin de la journée, tous seront compilés dans un seul fichier de feuille de style.

Si vous écrivez le même CSS à différents endroits, c'est-à-dire les classes, toujours les derniers remplaceront les plus anciens. Selon l'ordre d'exécution et de compilation.

Ici, je n'ai pas couvert de tutoriel complet sur la façon d'écrire CSS en C # en utilisant Blazorstylesheet . Étant donné que cette bibliothèque utilise la bibliothèque Stylesheet.net , qui a un tutoriel complet, vous pouvez vous référer au lien ci-dessous pour des conseils détaillés sur la rédaction de CSS en C #.

Référentiel : https://github.com/abdisamadmoh/stylesheet.net

Quand et comment écrire CSS dans des composants?

Avec Blazorstylesheet , nous avons la liberté d'écrire notre CSS n'importe où dans notre projet Blazor. Ceci est pratique pour garder les styles spécifiques à un composant particulier et mettre à jour notre CSS en temps réel. Mais rappelez-vous, pour des styles ou des styles plus grands utilisés dans l'ensemble de votre application, il est généralement préférable de les organiser dans des classes C # distinctes. Cela rend votre code plus facile à gérer.

Contrairement aux classes, nous pouvons accéder à la feuille de style principale grâce à la décoration d'attribut que l'injection est gérée par la feuille de Blazorstyles elle-même. Dans les composants , nous pouvons accéder à la feuille de style principale par injection fournie par le conteneur de dépendance à l'injection (DI) fournie par .NET.

Dans vos composants, utilisez @Inject . Mettez-le en haut de votre fichier de rasoir .

 @inject Stylesheet sheet

Ensuite, vous pouvez utiliser sheet dans votre composant.

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

Dans les composants ou dans d'autres endroits où BlazorsTylesheet ne gérait pas, vous devez appeler sheet.Build() Lorsque vous changez quelque chose dans la feuille de style pour refléter les changements.

Vous n'avez pas besoin d'appeler StateHasChanged() car cela n'a aucun effet sur Blazorstylesheet .

Pourquoi nous avons besoin ...

Attribut loading="loader" dans notre <html loading="loader"> et fix.css ?

BLAZORSTYLESHEET dépend de JavaScript Runtime (JSRuntime) fourni par Blazor. Jsruntime n'est pas prêt jusqu'à ce que la page entière soit chargée. Cela signifie que Blazorstylesheet doit attendre jusqu'à ce que JSRuntime soit prêt à envoyer le CSS compilé au côté client.

Cela créera un problème où votre site Web n'est pas conçu jusqu'à ce que tout soit chargé. Vous pouvez résoudre ce problème en montrant un chargeur ou en affichant le site Web jusqu'à ce que le CSS soit prêt et le site Web est stylé.

Les deux solutions résident dans le fichier fix.css que vous avez ajouté.

Pour afficher le chargeur pendant que le site Web se prépare, ajoutez l'attribut HTML suivant dans votre balise HTML.

 < html loading =" loader " >

Pour ne pas afficher le contenu du site Web pendant qu'il se prépare, ajoutez l'attribut HTML suivant dans votre balise HTML.

 < html loading ="" >

BLAZORSTYLESHEET n'ajoute aucun élément au DOM pour créer le chargeur. Vous ne devez donc pas vous soucier de la modification de votre DOM.

Plus...

Cette bibliothèque utilise Stylesheet.net que vous pouvez trouver le référentiel ci-dessous

Référentiel : https://github.com/abdisamadmoh/stylesheet.net