To størrelsesjusterbare ruder. Brugerne trækker bjælken med mus eller berøring, eller giver den fokus og bruger piletasterne.
Hvorfor det hjælper
- Mus, berøring og tastatur
- Husker størrelsen, hvis du beder om det
- Enkel
Hvor det passer
- Liste- og detaljevisninger
- Editorer med forhåndsvisning
- Filbrowsere
Eksempel
<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;
}Et kort uddrag. Tilføj @using RayCraft.Blazor.Components til din side, og brug en interaktiv gengivelsestilstand.
Inkluderet i RayCraft Free. Fungerende eksempler findes i GitHub-lager (MIT); det indeholder eksempel- og demokode, ikke bibliotekets kode.