diff --git a/components/form/columns.md b/components/form/columns.md index 593299930d..a7793a2bfc 100644 --- a/components/form/columns.md +++ b/components/form/columns.md @@ -15,27 +15,29 @@ The Form component for Blazor allows you to add multiple columns by using the `C >caption Add columns to a Form with Automatically generated fields -You can set the `Columns` parameter when the Form component automatically generates the editors. The form will spread the editors evenly across the columns. It will calculate it using this formula: `propertiesInModelCount / Columns`. +You can set the `Columns` parameter when [``](slug:form-formitems-formitemstemplate) is not used and the Form manages its layout. The Form will spread the editors evenly across the columns. -````RAZOR -@* Add colums to the Form component *@ +When using `Columns`, you can also define arbitrary space between the rows with the `RowSpacing` parameter. - +````RAZOR + @code { - public Person person = new Person(); + private Person Employee { get; set; } = new(); public class Person { public int Id { get; set; } - public string FirstName { get; set; } - public string LastName { get; set; } - public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20); - public string CompanyName { get; set; } - public DateTime HireDate { get; set; } - public bool IsOnVacation { get; set; } = true; + public string FirstName { get; set; } = string.Empty; + public string LastName { get; set; } = string.Empty; + public DateTime DOB { get; set; } = DateTime.Today.AddYears(-18); + public string CompanyName { get; set; } = string.Empty; + public DateTime HireDate { get; set; } = DateTime.Today; + public bool IsOnVacation { get; set; } } } ```` diff --git a/components/form/formgroups.md b/components/form/formgroups.md index 5919bfc08b..547652ed0d 100644 --- a/components/form/formgroups.md +++ b/components/form/formgroups.md @@ -21,11 +21,14 @@ In this article: The `FormGroup` tag exposes the following parameters: -* `LabelText` - `string` - defines a label for the entire group. +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) -* `Columns` - `int` - defines the number of columns in the group. - -* `ColumnSpacing` - `string` - defines the horizontal space between the editors in the group. +| Parameter | Type and Default Value| Description | +| --- | --- | --- | +| `LabelText` | `string` | The label for the entire group rendered as a `` element in a `
`. | +| `Columns` | `int` | The number of columns in the group. | +| `ColumnSpacing` | `string` (`"16px"`) | The horizontal space between the columns in the group. | +| `RowSpacing` | `string` | The vertical space between the fields in the group. The default value is zero, but there is a default top margin for Form items. This parameter has effect only when `Columns` is set. | ## Example - Organize FormItems into Groups @@ -36,56 +39,42 @@ You can organize some FormItems into logical groups. You can configure the label ![FormItem example](images/formgroups-example.png) ````RAZOR -@* Organize items into groups *@ - -@using System.ComponentModel.DataAnnotations - - - - - + - - - - - + + + + + - - - + + + + @code { - public Person person { get; set; } = new Person(); + private Person Employee { get; set; } = new(); public class Person { - [Required(ErrorMessage = "The First name is required")] - public string FirstName { get; set; } - [Required(ErrorMessage = "The Last name is required")] - public string LastName { get; set; } - [Range(18, 120, ErrorMessage = "The age should be between 18 and 120")] - public int Age { get; set; } - [Required] - [EmailAddress(ErrorMessage = "Enter a valid email")] - public string Email { get; set; } - [Required] - public string CompanyName { get; set; } - [MaxLength(25, ErrorMessage = "The position can be maximum 25 characters long")] - public string Position { get; set; } + public string FirstName { get; set; } = string.Empty; + public string LastName { get; set; } = string.Empty; + public DateTime? BirthDate { get; set; } + public string Email { get; set; } = string.Empty; + public string CompanyName { get; set; } = string.Empty; + public string Position { get; set; } = string.Empty; + public DateTime HirehDate { get; set; } = DateTime.Today; } } ```` ## See Also - * [Overview](slug:form-overview) - * [FormItems](slug:form-formitems) - * [Template](slug:form-formitems-template) - * [Orientation](slug:form-orientation) - * [Events](slug:form-events) - - +* [Overview](slug:form-overview) +* [FormItems](slug:form-formitems) +* [Template](slug:form-formitems-template) +* [Orientation](slug:form-orientation) +* [Events](slug:form-events) diff --git a/components/form/overview.md b/components/form/overview.md index 989fe67a82..82522398e3 100644 --- a/components/form/overview.md +++ b/components/form/overview.md @@ -203,12 +203,13 @@ You can customize the editors further through the [form items](slug:form-formite The [Blazor Form](https://demos.telerik.com/blazor-ui/form/overview) exposes multiple parameters that allow you to customize its layout. Besides the parameters below, the Form component also allows you to [define a completely custom layout with HTML markup and Razor components](slug:form-formitems-formitemstemplate). -| Parameter | Type and Default value | Description | -|-----------|------------------------|-------------| -| `ButtonsLayout` | `FormButtonsLayout` enum
(`Start`) | Determines the position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). | -| `Columns` | `int` | Defines the number of columns in the Form. See the [Columns](slug:form-columns) article for more information | -| `ColumnSpacing` | `string` | Defines the amout of horizontal space between the Columns. See the [Columns](slug:form-columns) article for more information. | -| `Orientation` | `FormOrientation` enum
(`Vertical`) | Determines the position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. | +| Parameter | Type and Default value | Description | +| --- | --- | --- | +| `ButtonsLayout` | `FormButtonsLayout` enum
(`Start`) | The position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). | +| `Columns` | `int` | The number of columns in the Form. See the [Columns](slug:form-columns) article for more information | +| `ColumnSpacing` | `string` (`"32px"`) | The amout of horizontal space between the columns. See the [Columns](slug:form-columns) article for more information. | +| `Orientation` | `FormOrientation` enum
(`Vertical`) | The position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. | +| `RowSpacing` | `string` | The amout of vertical space between the rows. The default value is zero, but there is a default top margin for Form items. This parameter has effect only when `Columns` is set. | ### Styling and Appearance