Skip to content

Commit 4e58b4c

Browse files
dimodidimodi
committed
RowSpacing continued
1 parent 0f237bb commit 4e58b4c

File tree

3 files changed

+29
-39
lines changed

3 files changed

+29
-39
lines changed

‎components/form/columns.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,15 @@ The Form component for Blazor allows you to add multiple columns by using the `C
1515

1616
>caption Add columns to a Form with Automatically generated fields
1717
18-
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`.
18+
You can set the `Columns` parameter when [`<FormItemsTemplate>`](slug:form-formitems-formitemstemplate) is not used and the Form manages its layout. The Form will spread the editors evenly across the columns.
19+
20+
When using `Columns`, you can also define arbitrary space between the rows with the `RowSpacing` parameter.
1921

2022
````RAZOR
2123
<TelerikForm Model="@Employee"
2224
Columns="2"
23-
ColumnSpacing="25px"
24-
RowSpacing="25px">
25+
ColumnSpacing="24px"
26+
RowSpacing="24px">
2527
</TelerikForm>
2628
2729
@code {

‎components/form/formgroups.md

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@ The `FormGroup` tag exposes the following parameters:
2323

2424
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
2525

26-
| Parameter | Type | Description |
26+
| Parameter | Type and Default&nbsp;Value| Description |
2727
| --- | --- | --- |
2828
| `LabelText` | `string` | The label for the entire group rendered as a `<legend>` element in a `<fieldset>`. |
2929
| `Columns` | `int` | The number of columns in the group. |
30-
| `ColumnSpacing` | `string` | The horizontal space between the columns in the group. |
31-
| `RowSpacing` | `string` | The vertical space between the fields in the group. |
30+
| `ColumnSpacing` | `string` (`"16px"`) | The horizontal space between the columns in the group. |
31+
| `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. |
3232

3333
## Example - Organize FormItems into Groups
3434

@@ -39,46 +39,34 @@ You can organize some FormItems into logical groups. You can configure the label
3939
![FormItem example](images/formgroups-example.png)
4040

4141
````RAZOR
42-
@* Organize items into groups *@
43-
44-
@using System.ComponentModel.DataAnnotations
45-
46-
<TelerikForm Model="@person" Columns="2" ColumnSpacing="25px">
47-
<FormValidation>
48-
<DataAnnotationsValidator></DataAnnotationsValidator>
49-
</FormValidation>
42+
<TelerikForm Model="@Employee" Columns="2" ColumnSpacing="24px">
5043
<FormItems>
51-
<FormGroup LabelText="Personal Information" Columns="2" ColumnSpacing="15px">
52-
<FormItem LabelText="First Name" Field="@nameof(Person.FirstName)"></FormItem>
53-
<FormItem LabelText="Last Name" Field="@nameof(Person.LastName)"></FormItem>
54-
<FormItem LabelText="Age" Field="@nameof(Person.Age)" ColSpan="2"></FormItem>
55-
<FormItem LabelText="Email" Field="@nameof(Person.Email)" ColSpan="2"></FormItem>
44+
<FormGroup LabelText="Personal Information" Columns="2" ColumnSpacing="12px" RowSpacing="6px">
45+
<FormItem Field="@nameof(Person.FirstName)" LabelText="First Name" />
46+
<FormItem Field="@nameof(Person.LastName)" LabelText="Last Name" />
47+
<FormItem Field="@nameof(Person.BirthDate)" LabelText="Birth Date" ColSpan="2"></FormItem>
48+
<FormItem Field="@nameof(Person.Email)" ColSpan="2"></FormItem>
5649
</FormGroup>
57-
<FormGroup LabelText="Employee Information">
58-
<FormItem LabelText="Company Name" Field="@nameof(Person.CompanyName)"></FormItem>
59-
<FormItem LabelText="Position" Field="@nameof(Person.Position)"></FormItem>
50+
<FormGroup LabelText="Employee Information" Columns="1" RowSpacing="6px">
51+
<FormItem Field="@nameof(Person.CompanyName)" LabelText="Company Name" />
52+
<FormItem Field="@nameof(Person.Position)" />
53+
<FormItem Field="@nameof(Person.HirehDate)" LabelText="Hire Date" />
6054
</FormGroup>
6155
</FormItems>
6256
</TelerikForm>
6357
6458
@code {
65-
public Person person { get; set; } = new Person();
59+
private Person Employee { get; set; } = new();
6660
6761
public class Person
6862
{
69-
[Required(ErrorMessage = "The First name is required")]
70-
public string FirstName { get; set; }
71-
[Required(ErrorMessage = "The Last name is required")]
72-
public string LastName { get; set; }
73-
[Range(18, 120, ErrorMessage = "The age should be between 18 and 120")]
74-
public int Age { get; set; }
75-
[Required]
76-
[EmailAddress(ErrorMessage = "Enter a valid email")]
77-
public string Email { get; set; }
78-
[Required]
79-
public string CompanyName { get; set; }
80-
[MaxLength(25, ErrorMessage = "The position can be maximum 25 characters long")]
81-
public string Position { get; set; }
63+
public string FirstName { get; set; } = string.Empty;
64+
public string LastName { get; set; } = string.Empty;
65+
public DateTime? BirthDate { get; set; }
66+
public string Email { get; set; } = string.Empty;
67+
public string CompanyName { get; set; } = string.Empty;
68+
public string Position { get; set; } = string.Empty;
69+
public DateTime HirehDate { get; set; } = DateTime.Today;
8270
}
8371
}
8472
````

‎components/form/overview.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -203,13 +203,13 @@ You can customize the editors further through the [form items](slug:form-formite
203203

204204
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).
205205

206-
| Parameter | Type and Default value | Description |
206+
| Parameter | Type and Default&nbsp;value | Description |
207207
|-----------|------------------------|-------------|
208208
| `ButtonsLayout` | `FormButtonsLayout` enum <br /> (`Start`) | The position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). |
209209
| `Columns` | `int` | The number of columns in the Form. See the [Columns](slug:form-columns) article for more information |
210-
| `ColumnSpacing` | `string` | The amout of horizontal space between the columns. See the [Columns](slug:form-columns) article for more information. |
210+
| `ColumnSpacing` | `string` (`"32px"`) | The amout of horizontal space between the columns. See the [Columns](slug:form-columns) article for more information. |
211211
| `Orientation` | `FormOrientation` enum <br /> (`Vertical`) | The position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. |
212-
| `RowSpacing` | `string` | The amout of vertical space between the rows. |
212+
| `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. |
213213

214214
### Styling and Appearance
215215

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy