Blazor CSS Dateien?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
19.03.2022, 22:59

Ausgehend davon, dass du mit der Standardstruktur arbeitest, die dir Visual Studio beim Anlegen eines Blazor-Projekts anlegt, wären folgende Ordner für die Ablage von Stylesheets relevant:

  • Im Shared-Ordner liegen jeweils eine CSS-Datei für das Hauptlayout (MainLayout.razor.css) und für das Navigationsmenü (NavMenu.razor.css).
  • Im wwwroot-Verzeichnis werden weitere statische Ressourcen abgelegt. Ich würde mir an deiner Stelle dort ein eigenes Verzeichnis (css o.ä.) erstellen, welches alle CSS-Dateien sammelt.
Fabian229 
Fragesteller
 20.03.2022, 15:14

Danke, noch was. Wie kann man jemanden auf eine andere Blazor Seite weitergeleitet. Zum Beispiel über einen Button?

0
regex9  20.03.2022, 15:32
@Fabian229

Du kannst einmal den NavigationManager verwenden:

@inject NavigationManager UriHelper

<button @onclick="@(() => GoTo("url to some page ..."))">Go to some page</button>

@code {
  void GoTo(url)
  {
    UriHelper.NavigateTo(url);
  }
}

Oder klassisches HTML:

<form action="url to some page">
  <button>Go to same page</button>
</form>

Einfache Links wären ebenso eine Option:

<a href="url to some page">Go to same page</a>

Wenn du für sie ein anderes Aussehen möchtest, kannst du CSS nutzen. Seitens Blazor gibt es ebenfalls noch eine eigene Komponente:

<NavLink href="url to some page">Go to same page</NavLink>

Sie wird letzten Endes in ein a-Element konvertiert. Die Besonderheit ist allerdings, dass ihr die CSS-Klasse active zugeordnet wird, wenn die aktuelle Seiten-URL der URL entspricht, auf die ihr href-Attribut zeigt. So lassen sich also Navigationen, in denen der gerade aktive Link markiert wird, schneller umsetzen.

0