BlazorStylesheet

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-RULE, ключевых слов и других элементов, устраняя необходимость дополнительных зависимостей.

StyleSheet.net - это не библиотека снаружи. Это библиотека с открытым исходным кодом (MIT), которую я написал и поддерживаю.

Репозиторий : https://github.com/abdisamadmoh/stylesheet.net

Я бы порекомендовал вам взглянуть и понять, как использовать styleSheet.net, прежде чем вы сможете продолжить этот урок. Нажмите на ссылку выше и прочитайте документации.

Быстрый старт

Чтобы начать использовать Blazorstylesheet , нам сначала нужно добавить ее в наш проект.

Мы можем добавить его из Nuget или непосредственно ссылаться на Blazorstylesheet.dll

Откройте диспетчер пакетов nuget в 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 вы можете найти его под корнем проекта. Для Мауи вы можете найти его под папкой компонентов .

Добавьте следующие пространства имен

 @using BlazorStylesheet
@using StylesheetNET

3. Теперь откройте _layout.cshtml на сервере Blazor , который вы можете найти в общей папке, или index.html в Blazor Webassembly и Maui , которые вы можете найти в папке wwwroot .

   Добавьте следующие теги HTML в голову перед каким -либо сценарием или стилями.

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

   Теперь прокрутите вверх, в теге <htm ...> Добавить загрузку = "Loader" . Я объясню, зачем нам нужны эти теги и атрибуты в последующих разделах (см. Раздел «Зачем нам нужно ...»).

    loading = "loader"
    OR
   loading = ""

4. И, наконец, в Blazor Server и Blazor Webassembly Open App.Razor , которое вы можете найти в рамках Project Root . И в Мауи , открытые маршруты. Разор , которые вы можете найти в папке компонентов .

   Оберните все, что вы видите там:

   < RazorStylesheet > </ RazorStylesheet >

Вы должны выполнить каждый шаг, упомянутый выше.

Теперь мы готовы написать наш первый CSS в C#.

В нашем mainlayout.razor давайте внедрим основную таблицу стилей и назваем это sheet . Затем мы можем использовать свойство sheet для написания нашего CSS. Вы можете сделать это в каждом компоненте, к которому вы хотите получить доступ к основной таблице стилей .

Теперь скопируйте следующий код и вставьте в Mainlayout.razor C# Code.

 [ 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# Пожалуйста, см.

Чтобы получить доступ к sheet в других компонентах, inject их stylesheet , следующим шагом 4 выше.

Всякий раз, когда вы что -то меняете в своей stylesheet , вам нужно вызовать sheet.Build() , чтобы отразить изменения в DOM .

Вот как вы можете получить доступ к своей stylesheet в своих компонентах. Но написание всего вашего CSS в компоненте не очень хорошая идея, так как ваши компоненты нечитаемые.

На самом деле нет ничего плохого, написать ваши CSS в ваших компонентах. Но это хорошая идея - написать в отдельных classes . Мы сделаем это в следующем разделе. Также мы узнаем, когда мы должны написать наш CSS в компоненте.

Давайте построим приложение реального мира

Теперь давайте критатом следующее меню 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
{
}

Но это просто простой класс, и Blazorstylesheet не узнает. Мы должны указать, что этот класс предназначен для таблицы стиля . Мы можем сделать это, просто украшая его атрибутом [StylesheetClass] как это:

 [ StylesheetClass ]
public class Style
{ 
}

Теперь, когда мы запускаем наше приложение, Blazorstylesheet распознает наш класс и составит его в CSS.

Теперь давайте напишем несколько CSS в нашем классе. Но написать где?

Ну, давайте добавим метод и назваем его Setup и украсим его [StylesheetMethod]

 [ StylesheetMethod ]
private void Setup ( )
{

}

Когда мы снова запускаем наше приложение, и Blazorstylesheet найдет наш класс, он будет искать наш метод Setup и выполнять его.

На самом деле, наш метод 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, нам нужно иметь доступ к нашей основной таблице стилей . Основная таблица стилей - это таблица стиля, которая действует как файл StyleShip нашего веб -сайта. Он создается, когда браузер загружает наш веб -сайт. И он доступен на нашем веб -сайте, и он постоянно, что означает, что он никогда не воссоздается снова, пока браузер не обновлен.

В компонентах бритвы мы можем получить к нему доступ через инъекцию.

Но чтобы получить доступ к основной таблице стилей в нашем классе, мы должны добавить свойство типового 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#, используя Blazorstylesheet . После этого у вас может быть столько классов, сколько хотите. В конце концов, все они будут составлены в один файл стиля.

Если вы пишете одни и те же CSS в разных местах IE классов, всегда более поздние переопределяют более старые. В зависимости от порядка исполнения и компиляции.

Здесь я не рассмотрел полное руководство о том, как писать CSS в C#, используя Blazorstylesheet . Поскольку в этой библиотеке используется библиотека StyleSheet.net , которая имеет всеобъемлющее руководство, вы можете обратиться к ссылке ниже для подробного руководства по написанию CSS в C#.

Репозиторий : https://github.com/abdisamadmoh/stylesheet.net

Когда и как писать CSS в компонентах?

С таблицей Blazorstylesshy , у нас есть свобода писать наш CSS в любом месте нашего Blazor Project. Это удобно для сохранения стилей, характерных для определенного компонента, и обновления нашего CSS в реальном времени. Но помните, что для более крупных стилей или стилей, используемых во всем вашем приложении, обычно лучше организовать их в отдельных классах C#. Это облегчает управление вашим кодом.

В отличие от классов, к которым мы можем получить доступ к основной таблице стилей посредством украшения атрибутов, которым управляет инъекция сама таблицы Blazorstylesshyshish . В компонентах мы можем получить доступ к основной таблице стилей посредством инъекции, обеспечиваемого контейнером впрыскивания зависимостей (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 (JSruntime), предоставленной Blazor. JSruntime не готова, пока вся страница не будет загружена. Это означает, что Blazorstylesheet должен ждать, пока JSruntime не будет готова отправить скомпилированную CSS на доу клиентов.

Это создаст проблему, в которой ваш сайт не будет оформлен, пока все не будет загружено. Вы можете решить эту проблему, показывая загрузчик или не отобразив веб -сайт до тех пор, пока CSS не будет готов, и веб -сайт стилизован.

Оба решения лежат в файле fix.css который вы добавили.

Чтобы показать Loader, пока веб -сайт готовится, добавьте следующий атрибут HTML в свой тег HTML.

 < html loading =" loader " >

Чтобы не показывать содержание веб -сайта, пока он готовится, добавьте следующий атрибут HTML в свой тег HTML.

 < html loading ="" >

Blazorstylesheet не добавляет ни одного элемента в DOM, чтобы создать погрузчик. Таким образом, вы не должны беспокоиться о изменении вашего DOM.

Более...

Эта библиотека использует stylesheet.net , который вы можете найти ниже

Репозиторий : https://github.com/abdisamadmoh/stylesheet.net