Zum Inhalt springen
HILFSMITTEL · FREE

BreakpointObserver

Layouts bauen, die mit einem einzigen einfachen Signal auf die Bildschirmgröße reagieren.

Wissen Sie, welche Bildschirmgröße Ihr Benutzer hat, und lassen Sie Ihren Code reagieren, wenn sie sich ändert.

Warum es hilft

  • Benannte Breakpoints
  • Aktualisiert bei Größenänderung
  • Einfach

Wo es passt

  • Responsive Logik
  • Layoutänderungen
  • Menüs

Beispiel

<BreakpointObserver>
    <p>Current breakpoint: <strong>@context</strong> (resize the window to see it change).</p>
    @if (context >= Breakpoint.Lg)
    {
        <Alert Severity="Severity.Info">Wide layout: the sidebar is shown.</Alert>
    }
    else
    {
        <Alert Severity="Severity.Warning">Narrow layout: the sidebar is hidden.</Alert>
    }
</BreakpointObserver>

Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.

In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.

Alle Steuerelemente ยท Dokumentation