BlazorStylesheet
v1.0.0.beta
Mit BlazorStylesheet können Entwickler von Blazor ( Blazor Server , WebAssembly und Maui Blazor) ihre CSS -Stile direkt in C# schreiben, ohne dass externe Stylesheets erforderlich sind.
BlazorStylesheet ist auf Stylesheet.net aufgebaut.
Stylesheet.net ist eine plattformübergreifende .NET-Bibliothek, die für C #-, VB.NET- und F# -entwickler entwickelt wurde. Es ermöglicht Entwicklern, CSS -Stile direkt in ihren Code zu schreiben, wodurch die Notwendigkeit externer Stylesheet -Dateien beseitigt wird. Stylesheet.net bietet vorgeschriebene Implementierungen für alle CSS-Eigenschaften, -Artum, Schlüsselwörter und andere Elemente und beseitigt die Notwendigkeit zusätzlicher Abhängigkeiten.
Stylesheet.net ist keine Bibliothek von außen. Es ist eine Open -Source -Bibliothek (MIT), die ich geschrieben und gewartet habe.
Repository : https://github.com/abdisamadmoh/stylesheet.net
Ich würde Ihnen empfehlen, einen Blick darauf zu werfen und zu verstehen, wie Sie Stylesheet.net verwenden, bevor Sie dieses Tutorial fortsetzen können. Klicken Sie auf den obigen Link und lesen Sie die Dokumentationen.
Um BlazorStylesheet zu verwenden, müssen wir es zunächst in unserem Projekt hinzufügen.
Wir können es von Nuget hinzufügen oder direkt auf BlazorStylesheet.dll verweisen
Öffnen Sie nuget -Paket -Manager in Visual Studio und fügen Sie den folgenden Code ein.
Install - Package BlazorStylesheet - Version 1.0 .0Öffnen Sie nach der Installation in Ihrem Blazor -Projekt das Dateiprogramm.cs oder startup.cs oder mauiProgram.cs .
Fügen Sie den folgenden Code hinzu
using BlazorStylesheet ;
builder . Services . AddStylesheet ( ) ;Öffnen Sie die Datei _imports.razor . In Blazor Server und WebAssembly finden Sie es unter dem Projektroot. Für Maui finden Sie es im Ordner des Komponenten .
Fügen Sie die folgenden Namespaces hinzu
@using BlazorStylesheet
@using StylesheetNETÖffnen Sie nun _layout.cshtml im Blazor -Server , den Sie unter Shared Ordner oder index.html in Blazor -WebAssembly und Maui finden können, die Sie unter wwwroot -Ordner finden können.
Fügen Sie die folgenden HTML -Tags im Kopf vor einem Skript oder Stil hinzu.
< link href =" _content/BlazorStylesheet/fix.min.css " rel =" stylesheet " />
< script src =" _content/BlazorStylesheet/BlazorStylesheet.js " > </ script >Scrollen Sie nun nach oben im Tag <htm ...> add ladeing = "lader" . Ich werde erklären, warum wir diese Tags und Attribute in späteren Abschnitten benötigen (siehe Abschnitt 'Warum wir brauchen ...').
loading = "loader"
OR
loading = ""Und schließlich in Blazor Server und Blazor WebAssembly Open App.razor, den Sie unter dem Projektroot finden. Und in Maui , offene Routen.Razor , die Sie im Ordner des Komponenten finden.
Wickeln Sie alles, mit dem Sie dort sehen, mit:
< RazorStylesheet > </ RazorStylesheet >Sie müssen jeden oben genannten Schritt ausfüllen.
sheet unserem Mainlayout . Dann können wir sheet verwenden, um unsere CSS zu schreiben. Sie können dies in jeder Komponente tun, die Sie auf das Hauptstylesheet zugreifen möchten.
Kopieren Sie nun den folgenden Code und fügen Sie in MainLayout.razor C# Code ein.
[ Inject ]
public Stylesheet sheet
{
get ; set ;
}
protected override void OnAfterRender ( bool firstRender )
{
base . OnAfterRender ( firstRender ) ;
if ( firstRender )
{
sheet [ "body" ] . BackgroundColor = "blue" ;
sheet . Build ( ) ;
}
} Erstellen Sie nun Ihre Anwendung und aktualisieren Sie den Browser. Sie werden sehen, wie Ihr HTML -Körper blue Farbe wurde.
Um zu erfahren, wie Sie Ihr Stylesheet in C# schreiben
Um in anderen Komponenten auf sheet zuzugreifen, inject ihnen das stylesheet nach Schritt 4 oben.
Wenn Sie etwas in Ihrem
stylesheetändern, müssen Siesheet.Build()anrufen, um die Änderungen in derDOMwiderzuspiegeln.
So können Sie in Ihren Komponenten auf Ihr stylesheet zugreifen. Das Schreiben Ihres gesamten CSS in eine Komponente ist jedoch keine gute Idee, da Ihre Komponentencodes unlesbar sind.
Tatsächlich ist nichts Falsches, wenn Sie Ihre CSS in Ihren Komponenten schreiben. Aber es ist eine gute Idee, in einen separaten classes zu schreiben. Wir werden das im nächsten Abschnitt tun. Außerdem werden wir lernen, wann wir unser CSS in eine Komponente schreiben sollten.
Lassen Sie uns nun das folgende Navi -Menü kretieren.
Erstellen Sie eine neue Komponente und nennen Sie es navbar.razor .
Fügen Sie den folgenden html -Code in den von Ihnen erstellten Navbar.razor ein.
< 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 >Fügen Sie den von Ihnen erstellten Navbar.razor zu mainlayout.razor oder in einer anderen gewünschten Komponente hinzu.
Lassen Sie uns jetzt unsere CSS in C#erstellen. Erstellen Sie eine neue Klasse und nennen Sie es Style.cs und fügen Sie diese beiden Namespaces hinzu.
using BlazorStylesheet ;
using StylesheetNET ;Jetzt mag unsere Klasse irgendwann so aussehen:
public class Style
{
} Aber das ist nur eine einfache Klasse, und BlazorStylesheet erkennt es nicht. Wir müssen angeben, dass diese Klasse für Stylesheet ist. Wir können dies tun, indem wir es einfach mit [StylesheetClass] -attribut wie folgt dekorieren:
[ StylesheetClass ]
public class Style
{
}Wenn wir jetzt unsere Anwendung ausführen, erkennen BlazorStylesheet unsere Klasse und kompilieren sie zu CSS.
Lassen Sie uns nun ein paar CSS in unserer Klasse schreiben. Aber wo schreibe wo?
Nun, fügen wir eine Methode hinzu und nennen Sie sie Setup und dekorieren Sie sie mit [StylesheetMethod] wie folgt:
[ StylesheetMethod ]
private void Setup ( )
{
} Wenn wir unsere Anwendung erneut ausführen und BlazorStylheets unsere Klasse findet, wird nach unserer Setup -Methode gesucht und ausgeführt.
In der Tat wird unsere Setup -Methode ausgeführt, nicht weil sie als Setup bezeichnet wird, aber BlazorStylesheet sucht nach parameterlosen Methoden, die mit [StylesheetMethod] -attribut dekoriert sind, und führt sie aus. Das bedeutet, dass wir so viele Methoden haben können, wie wir wollen, und welche Namen wir wollen.
[ 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.
}Aber wie sollen wir unsere CSS schreiben?
Um unser CSS zu schreiben, müssen wir einen Zugriff auf unser Hauptstylesheet haben. Das Hauptstylesheet ist das Stylesheet, das wie die Stylesheet -Datei unserer Website wirkt. Es wird erstellt, wenn der Browser unsere Website lädt. Und es ist auf unserer Website verfügbar und es ist konstant, dh es wird nie wieder nachgebaut, bis der Browser aktualisiert wird.
In Rasiermesserkomponenten können wir durch Injektion darauf zugreifen.
Um jedoch auf das Hauptstylesheet in unserer Klasse zuzugreifen, müssen wir eine Eigenschaft vom Typ Stylesheet hinzufügen und es mit [StylesheetProperty] dekorieren. Wir können es jeden Namen nennen, den wir wollen. In diesem Beispiel werden wir das sheet nennen.
[ StylesheetClass ]
public class Style
{
[ StylesheetProperty ]
private Stylesheet sheet
{
get ;
set ;
}
} Jetzt ist sheet ein Hinweis auf unser Hauptstildetael . Und wir können es verwenden, um unsere CSS zu schreiben.
BlazorStylleSheet sucht nach einer Eigenschaft mit Attribut [StylesheetProperty] und verweist auf das Hauptstylesheet .
Jetzt überprüfen, ob alles wie erwartet funktioniert. Geben wir die red background color unserer Website.
Ihr Style.cs -Klasse sollte vorerst so aussehen.
[ 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.
}
}Erstellen Sie nun Ihre Anwendung und aktualisieren Sie den Browser. Ihre Website sollte rot sein.
In Maui können Sie auf diesen Fehler stoßen:
'Element' is an ambiguous reference between 'Microsoft.Maui.Controls.Element' and 'StylesheetNET.Element'Weil sowohl
Microsoft.Maui.Controlsals auchStylesheetNETElement-Klasse haben.Fügen Sie den folgenden Namespace hinzu:
using Element = StylesheetNET . Element ;
Navbar.razorObwohl Sie Ihre CSS trotzdem schreiben können, möchten Sie, aber es ist eine gute Idee, sie in Methoden zu kategorisieren. Das werden wir hier tun.
Lassen Sie uns jetzt unser volles CSS schreiben. Hier ist der vollständige C# Code.
[ 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"
}
} ;
}
} Neben dem Stil der Navbar.razor haben wir auch Medienabfragen für Mobile , Tablet und Desktop hinzugefügt, in denen wir die Hintergrundfarbe des body für jeden ändern. Wir haben auch Animation namens flash für h1 -Elemente hinzugefügt.
So können Sie Ihnen CSS in Klassen in C# mit BlazorStylesheet schreiben. Auf diese Weise können Sie so viele Klassen haben, wie Sie möchten. Am Ende des Tages werden alle in eine einzelne Stylesheet -Datei zusammengestellt.
Wenn Sie das gleiche CSS an verschiedenen Orten schreiben, dh die Klassen, werden die späteren immer die älteren außer Kraft setzen. Abhängig von Ausführung und Zusammenstellung.
Hier habe ich kein vollständiges Tutorial zum Schreiben von CSS in C# mit BlazorStylesheet abgedeckt. Da diese Bibliothek die Stylesheet.net -Bibliothek verwendet, die ein umfassendes Tutorial verfügt, finden Sie auf den folgenden Link, um detaillierte Anleitungen zum Schreiben von CSS in C#zu finden.
Repository : https://github.com/abdisamadmoh/stylesheet.net
Mit BlazorStylesheet haben wir die Freiheit, unser CSS überall in unserem Blazor -Projekt zu schreiben. Dies ist nützlich, um die Stile für eine bestimmte Komponente spezifisch zu halten und unser CSS in Echtzeit zu aktualisieren. Denken Sie jedoch daran, dass es für größere Stile oder Stile, die in Ihrer gesamten Anwendung verwendet wurden, im Allgemeinen besser in separaten C# -Klessen organisieren können. Dies erleichtert Ihr Code leichter zu verwalten.
Im Gegensatz zu Klassen können wir über die Attributdekoration auf das Hauptstylesheet zugreifen, bei dem die Injektion vom BlazorStylesheet selbst verwaltet wird. In Komponenten können wir durch Injektion, die durch den von .NET bereitgestellten Container der Abhängigkeitsinjektion (DI) bereitgestellt wird, auf das Hauptstildetheet zugreifen.
Verwenden Sie in Ihren Komponenten @Inject . Setzen Sie es auf Ihre Rasierdatei .
@inject Stylesheet sheet Dann können Sie sheet in Ihrer Komponente verwenden.
protected override void OnAfterRender ( bool firstRender )
{
base . OnAfterRender ( firstRender ) ;
if ( firstRender )
{
sheet [ "body" ] . BackgroundColor = "blue" ;
sheet . Build ( ) ;
}
} In Komponenten oder anderen Orten, an denen BlazorStylesheet nicht verwaltet wird, müssen Sie sheet.Build() anrufen.
Sie müssen nicht
StateHasChanged()anrufen, da dies keinen Einfluss auf BlazorStylesheet hat.
loading="loader" Attribut in unserem <html loading="loader"> und fix.css ?BlazorStylesheet hängt von der von Blazor bereitgestellten JavaScript -Laufzeit (JSRuntime) ab. JsRuntime ist nicht fertig, bis die ganze Seite geladen ist. Dies bedeutet, dass BlazorStylesheet warten muss, bis JsRuntime bereit ist, das kompilierte CSS an den Clientside zu senden.
Dies erzeugt ein Problem, bei dem Ihre Website nicht so gestaltet ist, bis alles geladen ist. Sie können dieses Problem beheben, indem Sie entweder einen Loader anzeigen oder die Website nicht anzeigen, bis das CSS fertig ist und die Website gestaltet ist.
Beide Lösungen liegen in der von Ihnen hinzugefügten Datei fix.css .
Um Loader zu zeigen, während die Website vorbereitet wird, fügen Sie das folgende HTML -Attribut in Ihrem HTML -Tag hinzu.
< html loading =" loader " >Um den Inhalt der Website nicht anzuzeigen, während sie fertig ist, fügen Sie das folgende HTML -Attribut in Ihrem HTML -Tag hinzu.
< html loading ="" >BlazorStylesheet fügt dem DOM kein Element hinzu, um den Loader zu erstellen. Sie sollten sich also keine Sorgen machen, dass Ihr DOM geändert wird.
Diese Bibliothek verwendet Stylesheet.net , die Sie unten finden können
Repository : https://github.com/abdisamadmoh/stylesheet.net
