Rangschik labels en velden in een responsief raster van twaalf kolommen met sectiekoppen, zodat formulieren er op elk scherm ordelijk uitzien.
Waarom het helpt
- Responsief raster
- Sectiekoppen
- Labels gekoppeld aan velden
Waar het past
- Instellingen- en profielpagina's
- Beheerformulieren
- Dialogen
Voorbeeld
<FormLayout LabelPosition="FormLabelPosition.Start" Spacing="3">
<FormLayoutItem Label="Name" HelperText="As on your ID.">
<TextField @bind-Value="_name" />
</FormLayoutItem>
<FormLayoutItem Label="Email">
<TextField @bind-Value="_email" Type="email" />
</FormLayoutItem>
<FormLayoutItem Label="Notes">
<TextField @bind-Value="_notes" Lines="3" />
</FormLayoutItem>
<FormLayoutItem Label="Subscribe">
<Switch @bind-Value="_subscribe" Label="Send me the newsletter" />
</FormLayoutItem>
</FormLayout>
@code {
private string? _name;
private string? _email;
private string? _notes;
private bool _subscribe = true;
}Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.
Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.