BlazorStylesheet

Blazorstylesheet

Os desenvolvedores BlazorStylesheet permite que os desenvolvedores Blazor ( servidor Blazor , WebAssembly e Maui Blazor) escrevam seus estilos CSS diretamente em C# sem a necessidade de folhas de estilo externas.

Blazorstylesheet é construído sobre o Stylesheet.net .

Stylesheet.net é uma biblioteca .NET cruzada projetada para desenvolvedores C#, VB.NET e F#. Ele permite que os desenvolvedores escrevam estilos CSS diretamente em seu código, eliminando a necessidade de arquivos de folha de estilo externos. O Stylesheet.net fornece implementações pré-escritas para todas as propriedades do CSS, AT-Rules, Palavras-chave e outros elementos, eliminando a necessidade de dependências adicionais.

Stylesheet.net não é uma biblioteca de fora. É uma biblioteca de código aberto (MIT) que escrevi e mantenho.

Repositório : https://github.com/abdisamadmoh/stylesheet.net

Eu recomendaria que você dê uma olhada e entender como usar o Stylesheet.net antes de poder continuar este tutorial. Clique no link acima e leia as documentações.

Início rápido

Para começar a usar o BlazorStylesheet , primeiro precisamos adicioná -lo em nosso projeto.

Podemos adicioná -lo do NUGET , ou referenciar diretamente o blazorstylesheet.dll

Open nuget Package Manager no Visual Studio e cole o código a seguir.

 Install - Package BlazorStylesheet - Version 1.0 .0

1. Após a instalação, abra o arquivo program.cs ou startup.cs ou Mauiprogram.cs no seu projeto Blazor.

   Adicione o seguinte código

    using BlazorStylesheet ;
   builder . Services . AddStylesheet ( ) ;

2. Abra o arquivo _imports.razor . No servidor Blazor e WebAssembly, você pode encontrá -lo na raiz do projeto. Para Maui, você pode encontrá -lo na pasta componentes .

Adicione os seguintes espaços de nome

 @using BlazorStylesheet
@using StylesheetNET

3. Agora abra _layout.cshtml no servidor Blazor , que você pode encontrá -lo em pasta compartilhada , ou index.html na Blazor WebAssembly e Maui, que você pode encontrá -lo na pasta wwwroot .

   Adicione as seguintes tags HTML na cabeça antes de qualquer script ou estilos.

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

   Agora role para cima, na tag <htm ...> adicione carregamento = "carregador" . Vou explicar por que precisamos dessas tags e atributos nas seções posteriores (consulte a seção 'Por que precisamos ...').

    loading = "loader"
    OR
   loading = ""

4. E, finalmente, no Blazor Server e Blazor WebAssembly Open App.Razor , que você pode encontrar na raiz do projeto. E em Maui , Open Rotes.Razor , que você pode encontrar na pasta componentes .

   Enrole tudo o que você vê lá:

   < RazorStylesheet > </ RazorStylesheet >

Você precisa completar todas as etapas mencionadas acima.

Agora estamos prontos para escrever nosso primeiro CSS em C#.

Em nosso mainlayout.razor , vamos injetar a folha de estilo principal e chamar a sheet . Em seguida, podemos usar a propriedade sheet para escrever nosso CSS. Você pode fazer isso em todos os componentes que deseja acessar a folha de estilo principal .

Agora copie o seguinte código e cole em MainLayout.Razor C# Código.

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

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

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

 }

Agora crie seu aplicativo e atualize o navegador. Você verá que seu corpo HTML se tornou cor blue .

Para aprender a escrever sua folha de estilo em C#, consulte https://github.com/abdisamadmoh/stylesheet.net#quick-start

Para acessar sheet em outros componentes, inject -os na stylesheet , seguindo a etapa 4 acima.

Sempre que você mudar algo na sua stylesheet , você deve ligar para sheet.Build() para refletir as alterações no DOM .

É assim que você pode acessar sua stylesheet em seus componentes. Mas escrever todo o seu CSS em um componente não é uma boa ideia, pois isso torna seus códigos de componentes ilegíveis.

De fato, não há nada errado escrevendo seu CSS em seus componentes. Mas é uma boa ideia escrever em classes separadas. Faremos isso na próxima seção. Também aprenderemos quando devemos escrever nosso CSS em um componente.

Vamos construir a aplicação do mundo real

Agora permite cretatar o seguinte menu Navbar .

1. Crie um novo componente e nomeie o NavBar.razor .

2. Cole o seguinte código html no NavBar.Razor que você criou.

< 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. Adicione o NavBar.razor que você criou para mainlayout.razor ou em qualquer outro componente que você desejar.

4. Agora vamos criar nosso CSS em C#. Crie uma nova classe e chame de Style.cs e adicione esses dois espaços para nome.

 using BlazorStylesheet ;
using StylesheetNET ;

Agora, nossa classe pode parecer algo assim:

 public class Style
{
}

Mas essa é apenas uma aula simples, e o BlazorStylesheet não a reconhece. Precisamos indicar que esta classe é para a folha de estilo . Podemos fazer isso simplesmente decorando -o com o atributo [StylesheetClass] como este:

 [ StylesheetClass ]
public class Style
{ 
}

Agora, quando executamos nosso aplicativo, o BlazorStylesheet reconhecerá nossa classe e a compilará no CSS.

Agora vamos escrever alguns CSs em nossa classe. Mas escreva onde?

Bem, vamos adicionar um método e nomear Setup e decorá -lo com [StylesheetMethod] como este:

 [ StylesheetMethod ]
private void Setup ( )
{

}

Quando executamos nosso aplicativo novamente e o BlazorStylesheet encontra nossa classe, ele procurará nosso método Setup e o executará.

De fato, nosso método Setup é executado, não porque é chamado Setup , mas o BlazorStylesheet procura quaisquer métodos sem parâmetros que sejam decorados com o atributo [StylesheetMethod] . Isso significa que podemos ter tantos métodos quanto queremos e nomear os nomes que queremos.

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

Mas ainda assim, como devemos escrever nosso CSS?

Bem, para escrever nosso CSS, precisamos ter acesso à nossa folha de estilo principal . A folha de estilo principal é a folha de estilo que age como o arquivo da folha de estilo do nosso site. É criado quando o navegador carrega nosso site. E está disponível em todo o nosso site e é constante, ou seja, ele nunca é recriado novamente até que o navegador seja atualizado.

Nos componentes Razor, podemos acessá -lo através da injeção.

Mas, para acessar a folha de estilo principal em nossa classe, precisamos adicionar uma propriedade da Stylesheet de tipo e decorá -la com [StylesheetProperty] . Podemos nomear qualquer nome que queremos. Para este exemplo, nomearemos a sheet .

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

Agora, sheet é uma referência à nossa folha de estilo principal . E podemos usá -lo para escrever nosso CSS.

O BlazorStylesheet procurará qualquer propriedade com atributo [StylesheetProperty] e os referenciará à folha de estilo principal .

Agora, para verificar se tudo está funcionando como o esperado. Vamos dar red background color do corpo do nosso site.

Sua classe Style.cs deve ficar com isso agora.

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

Agora crie seu aplicativo e atualize o navegador. O corpo do seu site deve estar vermelho.

Em Maui , você pode encontrar este erro:

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

Porque tanto Microsoft.Maui.Controls quanto StylesheetNET têm classe Element .

Para corrigir, adicione o seguinte espaço para nome:

 using Element = StylesheetNET . Element ; 

Se tudo estiver indo bem, vamos escrever o CSS para o nosso Navbar.razor

Embora você possa escrever seu CSS de qualquer maneira, mas é uma boa ideia categorizá -los nos métodos. É isso que faremos aqui.

Agora vamos escrever nosso CSS completo. Aqui está o 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"
              }
          } ;
      }
  }

Além do estilo do NavBar.Razor , também adicionamos consultas de mídia para celular , tablet e desktop, onde alteramos a cor de fundo do body para cada um. Também adicionamos animação chamada flash para elementos h1 .

É assim que você pode escrever CSS em aulas em C# usando o BlazorStylesheet . Após essa maneira, você pode ter quantas classes quiser. No final do dia, todos eles serão compilados em um único arquivo de folha de estilo.

Se você escrever o mesmo CSS em lugares diferentes, ou seja, aulas, sempre as posteriores substituirão as mais antigas. Dependendo da ordem de execução e compilação.

Aqui, não cobri um tutorial completo sobre como escrever CSS em C# usando o BlazorStylesheet . Como esta biblioteca usa a biblioteca Stylesheet.net , que possui um tutorial abrangente, você pode consultar o link abaixo para obter orientações detalhadas sobre como escrever CSS em C#.

Repositório : https://github.com/abdisamadmoh/stylesheet.net

Quando e como escrever CSS em componentes?

Com o BlazorStylesheet , temos a liberdade de escrever nosso CSS em qualquer lugar do nosso projeto Blazor. Isso é útil para manter os estilos específicos para um componente específico e atualizar nossos CSs em tempo real. Mas lembre -se, para estilos ou estilos maiores usados ​​em todo o seu aplicativo, geralmente é melhor organizá -los em classes C# separadas. Isso facilita o gerenciamento do seu código.

Diferentemente das classes, que podemos acessar a folha de estilo principal através da decoração de atributos que a injeção é gerenciada pela própria folha de Blazorstyles . Nos componentes , podemos acessar a folha de estilo principal por meio de injeção fornecida pelo recipiente de injeção de dependência (DI) fornecido pelo .NET.

Nos seus componentes, use @Inject . Coloque no topo do seu arquivo de barbear .

 @inject Stylesheet sheet

Então você pode usar sheet em seu componente.

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

Em componentes ou em outros lugares onde o BlazorStylesheet não gerencia, você precisa ligar para sheet.Build() quando você muda algo na folha de estilo para refletir as alterações.

Você não precisa ligar para StateHasChanged() pois isso não afeta o BlazorStylesheet .

Por que precisamos ...

Atributo loading="loader" em nosso <html loading="loader"> e fix.css ?

Blazorstylesheet depende do JavaScript Runtime (JSruntime) fornecido pelo Blazor. O JSruntime não está pronto até que toda a página esteja carregada. Isso significa que o BlazorStylesheet tem que esperar até que o JSruntime esteja pronto para enviar o CSS compilado ao lado dos clientes.

Isso criará um problema em que seu site não é estilizado até que tudo esteja carregado. Você pode corrigir esse problema mostrando um carregador ou não exibindo o site até que o CSS esteja pronto e o site está estilizado.

Ambas as soluções estão no arquivo fix.css que você adicionou.

Para mostrar o carregador enquanto o site está se preparando, adicione o seguinte atributo HTML na sua tag HTML.

 < html loading =" loader " >

Para não mostrar o conteúdo do site enquanto estiver se preparando, adicione o seguinte atributo HTML na sua tag HTML.

 < html loading ="" >

BlazorStylesheet não adiciona nenhum elemento ao DOM para criar o carregador. Portanto, você não deve se preocupar com o seu DOM sendo modificado.

Mais...

Esta biblioteca usa o Stylesheet.net , que você pode encontrar o repositório abaixo

Repositório : https://github.com/abdisamadmoh/stylesheet.net