BlazorStylesheet
v1.0.0.beta
BlazorStylesheetを使用すると、Blazor（ Blazor Server 、 WebAssembly 、 Maui Blazor）開発者は、外部スタイルシートを必要とせずにCSSスタイルをC＃で直接書き込むことができます。
BlazorStylesheetは、 styleSheet.netの上に構築されています。
styleSheet.netは、C＃、VB.NET、およびF＃開発者向けに設計されたクロスプラットフォーム.NETライブラリです。開発者はコードにCSSスタイルを直接記述し、外部スタイルシートファイルの必要性を排除できます。 styleSheet.netは、すべてのCSSプロパティ、AT-RULE、キーワード、およびその他の要素に事前に書かれた実装を提供し、追加の依存関係の必要性を排除します。
styleSheet.netは外部からのライブラリではありません。これは、私が書いて維持しているオープンソース（MIT）ライブラリです。
リポジトリ：https：//github.com/abdisamadmoh/stylesheet.net
このチュートリアルを継続する前に、 styleSheet.netを使用する方法を調べて理解することをお勧めします。上のリンクをクリックして、ドキュメントをお読みください。
BlazorStylesheetの使用を開始するには、まずプロジェクトに追加する必要があります。
nugetから追加するか、 blazorstylesheet.dllを直接参照することができます
Visual Studioでnugetパッケージマネージャーを開き、次のコードを貼り付けます。
Install - Package BlazorStylesheet - Version 1.0 .0インストールが完了したら、Blazorプロジェクトでファイルプログラムまたはstartup.csまたはmauiprogram.csを開きます。
次のコードを追加します
using BlazorStylesheet ;
builder . Services . AddStylesheet ( ) ;ファイル_imports.razorを開きます。 Blazor ServerとWebAssemblyでは、プロジェクトルートの下で見つけることができます。マウイの場合、コンポーネントフォルダーの下にあります。
次の名前空間を追加します
@using BlazorStylesheet
@using StylesheetNETBlazor Serverで_layout.cshtmlを開きます。これを共有フォルダーの下にあるBlazorサーバー、またはBlazor WebAssemblyおよびMAUIでindex.htmlを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 = ""そして最後に、 Blazor ServerとBlazor WebAssembly Open App.Razorでは、プロジェクトルートの下で見つけることができます。マウイでは、コンポーネントフォルダーの下で見つけることができるOpen Routes.Razor 。
そこに表示されるすべてを包みます：
< RazorStylesheet > </ RazorStylesheet >上記のすべてのステップを完了する必要があります。
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にアクセスするには、上記のステップ4に従って、 stylesheet inject 。
stylesheetで何かを変更するたびに、sheet.Build()を呼び出して、DOMの変更を反映する必要があります。
これが、コンポーネントのstylesheetにアクセスする方法です。しかし、コンポーネントにCSS全体を書くことは、コンポーネントコードを読み取れないようにするため、良い考えではありません。
実際、コンポーネントにCSSを書くのは問題はありません。しかし、別のclassesで書くことをお勧めします。次のセクションでそれを行います。また、CSSをコンポーネントに書く必要があることを学びます。
次に、次のNavbarメニューをクレタティングできます。
新しいコンポーネントを作成し、 navbar.razorに名前を付けます。
作成したnavbar.razorに次のhtmlコードを貼り付けます。
< 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 >作成したnavbar.razorをmainlayout.razorまたは必要な他のコンポーネントに追加します。
次に、C＃でCSSを作成しましょう。新しいクラスを作成し、 Style.csと呼び、これら2つの名前空間を追加します。
using BlazorStylesheet ;
using StylesheetNET ;今、私たちのクラスはこのように見えるかもしれません：
public class Style
{
}しかし、それは単なる単純なクラスであり、 BlazorStylesheetはそれを認識していません。このクラスはStyleSheet用であることを示す必要があります。このような[StylesheetClass]属性で単に飾るだけで、それを行うことができます。
[ StylesheetClass ]
public class Style
{
}これで、アプリケーションを実行すると、 BlazorStylesheetがクラスを認識し、CSSにコンパイルします。
次に、クラスにいくつかのCSSを書きましょう。しかし、どこに書きますか？
さて、メソッドを追加して、 Setupを設定して[StylesheetMethod]で飾りましょう。
[ StylesheetMethod ]
private void Setup ( )
{
}アプリケーションを再度実行し、 BlazorStylesheetがクラスを見つけると、 Setup方法を探して実行します。
インタは、 Setup方法がSetupと呼ばれるためではなく、 [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を書くには、メインスタイルシートにアクセスする必要があります。メインスタイルシートは、当社のWebサイトのStyleSheetファイルのように機能するStyleSheetです。ブラウザがウェブサイトをロードするときに作成されます。そして、それは私たちのウェブサイト全体で利用可能であり、それは一定であり、意味があり、ブラウザが更新されるまで再び再現されることはありません。
かみそりのコンポーネントでは、注入を通じてアクセスできます。
ただし、クラスのメインスタイルシートにアクセスするには、型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 ;
Navbar.razorのCSSを書きましょうとにかく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の背景色を変更しました。また、 h1 Elementsのflashと呼ばれるアニメーションを追加しました。
それが、 BlazorStylesheetを使用してC＃のクラスでCSSを書く方法です。このように続いて、あなたはあなたが望むだけ多くのクラスを持つことができます。一日の終わりに、それらはすべて単一のStyleSheetファイルにコンパイルされます。
さまざまな場所で同じCSSを書く場合、つまりクラスのクラスは常に古いクラスをオーバーライドします。実行とコンピレーションの順序によって異なります。
ここでは、 BlazorStylesheetを使用してC＃でCSSを作成する方法に関する完全なチュートリアルについては説明していません。このライブラリは包括的なチュートリアルを備えたStylesheet.netライブラリを使用しているため、C＃でCSSを作成する詳細なガイダンスについては、以下のリンクを参照できます。
リポジトリ：https：//github.com/abdisamadmoh/stylesheet.net
BlazorStylesheetを使用すると、BlazorプロジェクトのどこにでもCSSを書く自由があります。これは、特定のコンポーネントに固有のスタイルを保持し、CSSをリアルタイムで更新するのに便利です。ただし、アプリケーション全体で使用されるより大きなスタイルやスタイルについては、一般に、個別のC＃クラスでそれらを整理する方が良いことです。これにより、コードの管理が容易になります。
クラスとは異なり、注入がBlazorStylesheet自体によって管理される属性の装飾を介してメインスタイルシートにアクセスできます。コンポーネントでは、.NETが提供する依存噴射（DI）コンテナによって提供される注入を通じて、メインスタイルシートにアクセスできます。
コンポーネントで@Injectを使用します。かみそりファイルの上に置きます。
@inject Stylesheet sheet次に、コンポーネントのsheetを使用できます。
protected override void OnAfterRender ( bool firstRender )
{
base . OnAfterRender ( firstRender ) ;
if ( firstRender )
{
sheet [ "body" ] . BackgroundColor = "blue" ;
sheet . Build ( ) ;
}
} BlazorStylesheetが管理しないコンポーネントまたはその他の場所では、StyleSheetの何かを変更して変更を反映するときにsheet.Build()を呼び出す必要があります。
BlazorStylesheetには影響しないため、
StateHasChanged()を呼び出す必要はありません。
loading="loader"属性<html loading="loader"> and fix.css ？BlazorStylesheetは、Blazorが提供するJavaScript Runtime（JSruntime）に依存します。 jsruntimeは、ページ全体がロードされるまで準備ができていません。これは、 BlazorStylesheetがJSRuntimeがクライアントサイドにコンパイルされたCSSを送信する準備ができているまで待たなければならないことを意味します。
これにより、すべてがロードされるまでウェブサイトがスタイルを整えないという問題が生じます。この問題は、ローダーを表示するか、CSSの準備が整い、Webサイトのスタイルが整っているまでWebサイトを表示しないことで修正できます。
両方のソリューションは、追加したfix.cssファイルにあります。
Webサイトの準備中にローダーを表示するには、HTMLタグに次のHTML属性を追加します。
< html loading =" loader " >準備が整っている間にWebサイトのコンテンツを表示しないには、HTMLタグに次のHTML属性を追加します。
< html loading ="" >BlazorStylesheetは、ローダーを作成するためにDOMに要素を追加しません。したがって、DOMが変更されていることを心配しないでください。
このライブラリは、以下のリポジトリを見つけることができるstyleSheet.netを使用しています
リポジトリ：https：//github.com/abdisamadmoh/stylesheet.net
