Blazor Navigation Bar?
Ich versuche Blazor zu lernen und möchte jetzt die Standard-Navbar loswerden. Ich habe ein schönes Navbar-CSS-Template gefunden.
Hier ist der „Code“
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Wie kann ich es als Navbar verwenden?
Ich meine, wie macht man den Blazor Code Behind?
1 Antwort
In deiner MainLayout.razor setzt du den Platzhalter für das Navigationsmenü:
<NavMenu />
und in der NavMenu.razor baust du einfach dein HTML zusammen, welches du für die Navigation haben möchtest. Zum Beispiel:
<nav class="topnav">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<!-- ... -->
</nav>
Ob du dafür Razor benötigst oder eine statische Auflistung ausreicht, musst du selbst wissen.
Das CSS kannst du wie bei HTML gewohnt über einen link-
<link href="path/to/css/file..." rel="stylesheet">
oder style-Tag
<style>
/* css code ... */
</style>
im head-Bereich des Dokuments einbinden.
Das NavMenu ist eine Komponente, die bereits beim Anlegen eines Standardprojekts erstellt wird. Das heißt, eigentlich sollte es ausreichen, nur die Shared/NavMenu.razor anzupassen und wenn man möchte, kann man in der Navmenu.razor.css auch seinen CSS-Code abladen (der ist dann eben nur für diese Komponente gültig; siehe CSS-Isolation).
Schau im Browserinspektor erst einmal, ob das HTML gerendert wird. Wenn nicht, wird es nicht ins MainLayout eingebunden. Eine zweite Fehlerquelle kann darin liegen, dass das CSS falsch eingebunden wird.
Es wird nun Text angezeigt also HTML funktioniert.
ich finde die Standard Navbar nicht besonders schön, daher möchte ich Sie ersetzen.
Zeigt nur einen White Screen an.