BlazorStylesheet

Hoja de chaqueta

BlazorStylesheet permite a los desarrolladores Blazor ( Blazor Server , WebAssembly y Maui Blazor) escribir sus estilos CSS directamente en C# sin la necesidad de hojas de estilo externos.

Blazorstylesheet está construida sobre Stylesheet.net .

Stylesheet.net es una biblioteca .NET multiplataforma diseñada para desarrolladores C#, VB.NET y F#. Permite a los desarrolladores escribir estilos CSS directamente en su código, eliminando la necesidad de archivos de hoja de estilo externos. Stylesheet.net proporciona implementaciones preescritas para todas las propiedades de CSS, AT-Rules, Palabras clave y otros elementos, eliminando la necesidad de dependencias adicionales.

Stylesheet.net no es una biblioteca desde afuera. Es una biblioteca de código abierto (MIT) que escribí y mantiene.

Repositorio : https://github.com/abdisamadmoh/stylesheet.net

Le recomendaría que eches un vistazo y entiendas cómo usar Stylesheet.net antes de que puedas continuar con este tutorial. Haga clic en el enlace de arriba y lea las documentos.

Comienzo rápido

Para comenzar a usar BlazorStylesheet , primero tenemos que agregarlo en nuestro proyecto.

Podemos agregarlo desde Nuget , o hacer referencia directamente a Blazorstylesheet.dll

Abra nuget Package Manager en Visual Studio y pegue el siguiente código.

 Install - Package BlazorStylesheet - Version 1.0 .0

1. Después de la instalación realizada, abra el archivo programa.cs o startup.cs o mauiprogram.cs en su proyecto Blazor.

   Agregue el siguiente código

    using BlazorStylesheet ;
   builder . Services . AddStylesheet ( ) ;

2. Abra el archivo _imports.razor . En Blazor Server y WebAssembly, puede encontrarlo bajo la raíz del proyecto. Para Maui puede encontrarlo en la carpeta de componentes .

Agregue los siguientes espacios de nombres

 @using BlazorStylesheet
@using StylesheetNET

3. Ahora abra _Layout.cshtml en el servidor Blazor que puede encontrarlo en la carpeta compartida , o index.html en Blazor WebAssembly y Maui , que puede encontrarlo en la carpeta wwwroot .

   Agregue las siguientes etiquetas HTML en la cabeza antes de cualquier script o estilos.

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

   Ahora desplácese hacia arriba, en la etiqueta <htm ...> agregue carging = "carger" . Explicaré por qué necesitamos estas etiquetas y atributos en secciones posteriores (vea la sección 'Por qué necesitamos ...').

    loading = "loader"
    OR
   loading = ""

4. Y, por último, en Blazor Server y Blazor WebAssembly abre App.razor que puede encontrar en la raíz del proyecto. Y en Maui , abra rutas.razor que puede encontrar en la carpeta de componentes .

   Envuelve todo lo que ves allí con:

   < RazorStylesheet > </ RazorStylesheet >

Tienes que completar cada paso mencionado anteriormente.

Ahora estamos listos para escribir nuestro primer CSS en C#.

En nuestro MainLayout.Razor , inyectemos la hoja de estilo principal y la llamemos sheet . Entonces podemos usar la propiedad sheet para escribir nuestro CSS. Puede hacer esto en cada componente al que desee acceder a la hoja de estilo principal .

Ahora copie el siguiente código y pegue en el código 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 ( ) ;
    }

 }

Ahora cree su aplicación y actualice el navegador. Verá que su cuerpo HTML se volvió blue .

Para aprender a escribir su hoja de estilo en C#, consulte https://github.com/abdisamadmoh/stylesheet.net#quick-start

Para acceder a sheet en otros componentes, inject la stylesheet , siguiendo el paso 4 anterior.

Cada vez que cambia algo en su hoja DOM stylesheet , debe llamar a la sheet.Build() llamadas.

Así es como puede acceder a su stylesheet en sus componentes. Pero escribir todo su CSS en un componente no es una buena idea, ya que eso hace que sus códigos de componentes sean ilegibles.

De hecho, no hay nada de malo en escribir su CSS en sus componentes. Pero es una buena idea escribir en classes separadas. Lo haremos en la siguiente sección. También aprenderemos cuándo deberíamos escribir nuestro CSS en un componente.

Vamos a construir una aplicación del mundo real

Ahora vamos a crecer el siguiente menú Navbar .

1. Cree un nuevo componente y asígnele el navegador .

2. Pegue el siguiente código html en Navbar.Razor que ha creado.

< 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. Agregue el navbar.razor que haya creado a mainLayout.razor o en cualquier otro componente que desee.

4. Ahora creemos nuestro CSS en C#. Cree una nueva clase y llámelo Style.cs y agregue estos dos espacios de nombres.

 using BlazorStylesheet ;
using StylesheetNET ;

Ahora, nuestra clase puede parecer algo así:

 public class Style
{
}

Pero esa es solo una clase simple, y Blazorstyles hous no lo reconoce. Necesitamos indicar que esta clase es para hojas de estilo . Podemos hacerlo simplemente decorándolo con el atributo [StylesheetClass] como este:

 [ StylesheetClass ]
public class Style
{ 
}

Ahora, cuando ejecutemos nuestra aplicación, Blazorstylesheet reconocerá nuestra clase y la compilará en CSS.

Ahora escribamos algunos CSS en nuestra clase. ¿Pero escribir dónde?

Bueno, agregemos un método y nombre lo Setup y decorarlo con [StylesheetMethod] así:

 [ StylesheetMethod ]
private void Setup ( )
{

}

Cuando ejecutamos nuestra aplicación nuevamente y BlazorStylesheet encuentra nuestra clase, buscará nuestro método Setup y lo ejecutará.

De hecho, nuestro método Setup se ejecuta, no porque se denomina Setup , sino que Blazorstylesheet busca cualquier método sin parámetros que esté decorado con el atributo [StylesheetMethod] y los ejecute. Eso significa que podemos tener tantos métodos como queramos y nombrar cualquier nombre que queramos.

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

Pero aún así, ¿cómo se supone que debemos escribir nuestro CSS?

Bueno, para escribir nuestro CSS necesitamos tener acceso a nuestra hoja de estilo principal . La hoja de estilo principal es la hoja de estilo que actúa como el archivo Stylesheet de nuestro sitio web. Se crea cuando el navegador carga nuestro sitio web. Y está disponible en todo nuestro sitio web y es constante, lo que significa que nunca se recrea nuevamente hasta que se actualice el navegador.

En los componentes de afeitar podemos acceder a ella a través de la inyección.

Pero para acceder a la hoja de estilo principal en nuestra clase, tenemos que agregar una propiedad de Stylesheet tipo y decorarla con [StylesheetProperty] . Podemos nombrarlo sea el nombre que queramos. Para este ejemplo, lo nombraremos sheet .

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

Ahora, sheet es una referencia a nuestra hoja de estilo principal . Y podemos usarlo para escribir nuestro CSS.

Blazorstylesheet buscará cualquier propiedad con atributo [StylesheetProperty] y hará referencia a la hoja de estilo principal .

Ahora, para verificar si todo funciona como se espera. Damos red background color del cuerpo de nuestro sitio web.

Tu clase Style.cs debería verse así por ahora.

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

Ahora cree su aplicación y actualice el navegador. El cuerpo de su sitio web debe estar rojo.

En Maui , puede encontrar este error:

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

Porque tanto Microsoft.Maui.Controls como StylesheetNET tienen clase Element .

Para arreglar, agregue el siguiente espacio de nombres:

 using Element = StylesheetNET . Element ; 

Si todo va bien, escribamos el CSS para nuestro Navbar.razor

Aunque puede escribir su CSS de todos modos que desee, pero es una buena idea clasificarlos en los métodos. Eso es lo que haremos aquí.

Ahora escribamos nuestro CSS completo. Aquí está el código C# completo.

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

Además del estilo para Navbar.Razor , también agregamos consultas de medios para dispositivos móviles , tabletas y escritorio donde cambiamos el color de fondo del body para cada uno. También agregamos animación llamada flash para elementos h1 .

Así es como puedes escribir tu CSS en clases en C# usando BlazorStylesheet . Siguiendo de esta manera, puede tener tantas clases como desee. Al final del día, todos se compilarán en un solo archivo de hoja de estilo.

Si escribe los mismos CSS en diferentes lugares, es decir, siempre las posteriores anularán las más antiguas. Dependiendo del orden de ejecución y compilación.

Aquí, no he cubierto un tutorial completo sobre cómo escribir CSS en C# usando BlazorStylesheet . Debido a que esta biblioteca utiliza la biblioteca Stylesheet.net , que tiene un tutorial integral, puede consultar el siguiente enlace para obtener una guía detallada sobre la redacción de CSS en C#.

Repositorio : https://github.com/abdisamadmoh/stylesheet.net

¿Cuándo y cómo escribir CSS en componentes?

Con BlazorStyles hous , tenemos la libertad de escribir nuestro CSS en cualquier lugar de nuestro proyecto Blazor. Esto es útil para mantener los estilos específicos de un componente particular y actualizar nuestro CSS en tiempo real. Pero recuerde, para estilos o estilos más grandes utilizados en toda su aplicación, generalmente es mejor organizarlos en clases de C# separadas. Esto hace que su código sea más fácil de administrar.

A diferencia de las clases, a las que podemos acceder a la hoja de estilo principal a través de la decoración de atributos que la inyección es administrada por la hoja de blazorstyles . En los componentes , podemos acceder a la hoja de estilo principal a través de la inyección proporcionada por el contenedor de inyección de dependencia (DI) proporcionado por .NET.

En sus componentes use @Inject . Póngalo en la parte superior de su archivo de afeitar .

 @inject Stylesheet sheet

Entonces puede usar sheet en su componente.

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

En componentes u otros lugares donde Blazorstyles hous no se administra, debe llamar sheet.Build() llamadas.

No necesita llamar StateHasChanged() ya que eso no tiene ningún efecto en la hoja de chaquetería .

Por qué necesitamos ...

loading="loader" Atributo en nuestro <html loading="loader"> y fix.css ?

BlazorStyles hoja depende de JavaScript Runtime (JSRuntime) proporcionado por Blazor. JSRuntime no está listo hasta que toda la página esté cargada. Esto significa que Blazorstyles hous tiene que esperar hasta que JSRuntime esté listo para enviar el CSS compilado a la orilla del cliente.

Esto creará un problema en el que su sitio web no tiene el estilo hasta que todo esté cargado. Puede solucionar este problema mostrando un cargador o no mostrando el sitio web hasta que el CSS esté listo y el sitio web está diseñado.

Ambas soluciones se encuentran en el archivo fix.css que agregó.

Para mostrar el cargador mientras el sitio web se está preparando, agregue el siguiente atributo HTML en su etiqueta HTML.

 < html loading =" loader " >

Para no mostrar el contenido del sitio web mientras se está preparando, agregue el siguiente atributo HTML en su etiqueta HTML.

 < html loading ="" >

BlazorStylesheet no agrega ningún elemento al DOM para crear el cargador. Por lo tanto, no debe preocuparse de que su DOM se modifique.

Más...

Esta biblioteca usa stylesheet.net que puede encontrar el repositorio a continuación

Repositorio : https://github.com/abdisamadmoh/stylesheet.net