To størrelsesjusterbare ruter. Brukerne drar linjen med mus eller berøring, eller gir den fokus og bruker piltastene.
Hvorfor det hjelper
- Mus, berøring og tastatur
- Husker størrelsen hvis du ber om det
- Enkel
Hvor det passer
- Liste- og detaljvisninger
- Redigeringsprogrammer med forhåndsvisning
- Fillesere
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 utdrag. Legg til @using RayCraft.Blazor.Components på siden din, og bruk en interaktiv gjengivelsesmodus.
Inkludert i RayCraft Free. Fungerende eksempler finnes i GitHub-arkiv (MIT); det inneholder eksempel- og demokode, ikke bibliotekets kode.