Zwei größenveränderbare Bereiche. Benutzer ziehen die Leiste mit Maus oder Berührung oder fokussieren sie und nutzen die Pfeiltasten.
Warum es hilft
- Maus, Touch und Tastatur
- Merkt sich die Größe auf Wunsch
- Einfach
Wo es passt
- Listen- und Detailansichten
- Editoren mit Vorschau
- Dateibrowser
Beispiel
<Splitter Size="30" CollapsiblePane="SplitterPane.First" @bind-Collapsed="_collapsed" SingleBelow="Breakpoint.Md" @bind-ActivePane="_active" Style="height:12rem">
<First>Folders. Press Enter or double-click the bar to collapse this pane.</First>
<Second>Messages. Below 768 px wide only one pane is shown.</Second>
</Splitter>
<Button Variant="Variant.Outlined" OnClick="@(() => _collapsed = _collapsed == SplitterPane.None ? SplitterPane.First : SplitterPane.None)">Toggle first pane</Button>
<Button Variant="Variant.Outlined" OnClick="@(() => _active = _active == SplitterPane.First ? SplitterPane.Second : SplitterPane.First)">Switch the pane of the narrow mode</Button>
<span>Collapsed: @_collapsed. Narrow mode shows: @_active.</span>
@code {
private SplitterPane _collapsed;
private SplitterPane _active = SplitterPane.First;
}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.