Två storleksändringsbara rutor. Användare drar fältet med mus eller beröring, eller ger det fokus och använder piltangenterna.
Varför det hjälper
- Mus, beröring och tangentbord
- Kommer ihåg storleken om du ber om det
- Enkel
Var det passar
- List- och detaljvyer
- Redigerare med förhandsvisning
- Filläsare
Exempel
<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;
}Ett kort utdrag. Lägg till @using RayCraft.Blazor.Components på din sida och använd ett interaktivt renderingsläge.
Ingår i RayCraft Free. Fungerande exempel finns i GitHub-arkiv (MIT); det innehåller exempel- och demokod, inte bibliotekets kod.