FormLayout

Ordna etiketter och fält i ett responsivt rutnät med tolv kolumner med sektioner med rubrik, så att formulär ser ordnade ut på varje skärm.

Varför det hjälper

• Responsivt rutnät
• Sektioner med rubrik
• Etiketter kopplade till fält

Var det passar

• Inställnings- och profilsidor
• Administrationsformulär
• Dialoger

Exempel

<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;
}

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.

Alla kontroller · Dokumentation