Disposez libellés et champs dans une grille adaptative de douze colonnes avec des sections titrées, pour que les formulaires restent ordonnés sur tous les écrans.
Pourquoi c’est utile
- Grille adaptative
- Sections titrées
- Libellés liés aux champs
Où il trouve sa place
- Pages de paramètres et de profil
- Formulaires d’administration
- Dialogues
Exemple
<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;
}Un court fragment. Ajoutez @using RayCraft.Blazor.Components à votre page et utilisez un mode de rendu interactif.
Inclus dans RayCraft Free. Des exemples fonctionnels se trouvent dans le dépôt GitHub (MIT); il contient du code d’exemple et de démonstration, pas le code de la bibliothèque.