@vaadin/form-layout 25.3.0-rc1 → 25.4.0-alpha1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +6 -6
- package/package.json +11 -11
- package/src/layouts/auto-responsive-layout.js +14 -2
- package/src/styles/vaadin-form-item-base-styles.js +5 -4
- package/src/styles/vaadin-form-layout-base-styles.js +7 -1
- package/src/vaadin-form-item.d.ts +14 -0
- package/src/vaadin-form-item.js +14 -0
- package/src/vaadin-form-layout-mixin.d.ts +4 -10
- package/src/vaadin-form-layout-mixin.js +4 -10
- package/src/vaadin-form-layout.d.ts +53 -19
- package/src/vaadin-form-layout.js +53 -19
- package/web-types.json +5 -5
- package/web-types.lit.json +4 -4
package/custom-elements.json
CHANGED
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
"declarations": [
|
|
81
81
|
{
|
|
82
82
|
"kind": "class",
|
|
83
|
-
"description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label aside</label>\n <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n <label slot=\"label\">Label on top</label>\n <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label</label>\n <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` attribute can be used to target the label on top state:\n\n```css\nvaadin-form-item[label-position=\"top\"] {\n padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`label` | The slotted label element wrapper\n`required-indicator` | The `required` state indicator element\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
83
|
+
"description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label aside</label>\n <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n <label slot=\"label\">Label on top</label>\n <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label</label>\n <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` attribute can be used to target the label on top state:\n\n```css\nvaadin-form-item[label-position=\"top\"] {\n padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`label` | The slotted label element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n\n**Deprecation note:** The `--vaadin-form-item-label-*` properties are deprecated and will be removed\nin Vaadin 26. Use the `--vaadin-input-field-label-*` properties instead.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
84
84
|
"name": "FormItem",
|
|
85
85
|
"members": [],
|
|
86
86
|
"attributes": [
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
"type": {
|
|
197
197
|
"text": "boolean"
|
|
198
198
|
},
|
|
199
|
-
"description": "When enabled with `autoResponsive`,
|
|
199
|
+
"description": "When enabled with `autoResponsive`, the layout puts labels next to\nthe fields. If the layout is too narrow for a single column with a\nside label, the labels automatically return to their default position\nabove the fields.\n\nThe default value is `false`.",
|
|
200
200
|
"attribute": "labels-aside"
|
|
201
201
|
},
|
|
202
202
|
{
|
|
@@ -276,7 +276,7 @@
|
|
|
276
276
|
"type": {
|
|
277
277
|
"text": "boolean"
|
|
278
278
|
},
|
|
279
|
-
"description": "When enabled with `autoResponsive`,
|
|
279
|
+
"description": "When enabled with `autoResponsive`, the layout puts labels next to\nthe fields. If the layout is too narrow for a single column with a\nside label, the labels automatically return to their default position\nabove the fields.\n\nThe default value is `false`.",
|
|
280
280
|
"fieldName": "labelsAside"
|
|
281
281
|
},
|
|
282
282
|
{
|
|
@@ -326,7 +326,7 @@
|
|
|
326
326
|
"declarations": [
|
|
327
327
|
{
|
|
328
328
|
"kind": "class",
|
|
329
|
-
"description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\" value=\"jane.doe@example.com\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <br>\n\n <vaadin-form-item>\n <label slot=\"label\">Confirm Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](#/elements/vaadin-form-layout#property-maxColumns) properties define the width of\neach column and the maximum number of columns that the component can create. By default, the component\ncreates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`\nCSS custom property, if defined.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance, set the\n`auto-responsive` attribute:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n</vaadin-form-layout>\n```\n\nYou can also enable it for all instances by enabling the following feature flag\nbefore `<vaadin-form-layout>` elements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```\n\n#### Organizing Fields into Rows\n\nBy default, each field is placed on a new row. To organize fields into rows, you can either:\n\n1. Manually wrap fields into [`<vaadin-form-row>`](#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](#/elements/vaadin-form-layout#property-autoRows) property to\n let Form Layout automatically arrange fields in available columns, wrapping to a new\n row when necessary. `<br>` elements can be used to force a new row.\n\nHere is an example of using `<vaadin-form-row>`:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-form-row>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n </vaadin-form-row>\n <vaadin-form-row>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n </vaadin-form-row>\n</vaadin-form-layout>\n```\n\n#### Expanding Columns and Fields\n\nYou can configure Form Layout to expand columns to evenly fill any remaining space after\nall fixed-width columns have been created.\nTo enable this, set the [`expandColumns`](#/elements/vaadin-form-layout#property-expandColumns)\nproperty to `true`.\n\nAlso, Form Layout can stretch fields to make them take up all available space within columns.\nTo enable this, set the [`expandFields`](#/elements/vaadin-form-layout#property-expandFields)\nproperty to `true`.\n\n#### Customizing Label Position\n\nBy default, Form Layout displays labels above the fields. To
|
|
329
|
+
"description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\" value=\"jane.doe@example.com\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <br>\n\n <vaadin-form-item>\n <label slot=\"label\">Confirm Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](#/elements/vaadin-form-layout#property-maxColumns) properties define the width of\neach column and the maximum number of columns that the component can create. By default, the component\ncreates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`\nCSS custom property, if defined.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance, set the\n`auto-responsive` attribute:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n</vaadin-form-layout>\n```\n\nYou can also enable it for all instances by enabling the following feature flag\nbefore `<vaadin-form-layout>` elements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```\n\n#### Organizing Fields into Rows\n\nBy default, each field is placed on a new row. To organize fields into rows, you can either:\n\n1. Manually wrap fields into [`<vaadin-form-row>`](#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](#/elements/vaadin-form-layout#property-autoRows) property to\n let Form Layout automatically arrange fields in available columns, wrapping to a new\n row when necessary. `<br>` elements can be used to force a new row.\n\nHere is an example of using `<vaadin-form-row>`:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-form-row>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n </vaadin-form-row>\n <vaadin-form-row>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n </vaadin-form-row>\n</vaadin-form-layout>\n```\n\n#### Expanding Columns and Fields\n\nYou can configure Form Layout to expand columns to evenly fill any remaining space after\nall fixed-width columns have been created.\nTo enable this, set the [`expandColumns`](#/elements/vaadin-form-layout#property-expandColumns)\nproperty to `true`.\n\nAlso, Form Layout can stretch fields to make them take up all available space within columns.\nTo enable this, set the [`expandFields`](#/elements/vaadin-form-layout#property-expandFields)\nproperty to `true`.\n\n#### Customizing Label Position\n\nBy default, Form Layout displays labels above the fields. To put labels next to the fields,\nenable the [`labelsAside`](#/elements/vaadin-form-layout#property-labelsAside) property:\n\n```html\n<vaadin-form-layout auto-responsive labels-aside>\n <vaadin-form-row>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n </vaadin-form-row>\n <vaadin-form-row>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n </vaadin-form-row>\n</vaadin-form-layout>\n```\n\nWhen there isn't enough space for side labels, Form Layout returns the labels to\nthe default position above the fields.\n\nAll Vaadin input field components placed directly in the Form Layout support labels-aside\nmode out of the box, showing their label next to the field. Checkable fields, such as\n`<vaadin-checkbox>`, work differently: their label remains in place, and Form Layout only\nindents such fields so they align with the input column.\n\nAny other components, such as buttons or custom components, are just placed at the start of\nthe label column. How they should be laid out in this mode is left to the developer and can\nbe handled in one of two ways:\n\n1. Wrap the component in a Form Item, with or without providing a label. The Form Item\n reserves space for the label, so the component ends up in the input column, aligned\n with the other fields:\n\n ```html\n <vaadin-form-item>\n <label slot=\"label\">Name</label>\n <input type=\"text\" />\n </vaadin-form-item>\n\n <vaadin-form-item>\n <vaadin-button>Submit</vaadin-button>\n </vaadin-form-item>\n ```\n\n2. Write custom CSS. When labels are rendered next to fields, Form Layout sets the\n `has-labels-aside` attribute on its host element and the `data-form-layout-has-labels-aside`\n attribute on children. You can rely on these attributes to adapt your components to\n labels-aside mode, for example:\n\n ```css\n vaadin-button[data-form-layout-has-labels-aside] {\n margin-inline-start: calc(\n var(--vaadin-form-layout-label-width) +\n var(--vaadin-form-layout-label-spacing)\n );\n }\n ```\n\n### CSS Properties Reference\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`\n`--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`\n`--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`\n`--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the field when labels are displayed aside | `1em`\n`--vaadin-form-layout-label-text-align` | Alignment of the label when labels are displayed aside | `start`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---|---\n`has-labels-aside` | Set when the `labelsAside` property is enabled and there is enough space to display labels next to the fields",
|
|
330
330
|
"name": "FormLayout",
|
|
331
331
|
"members": [
|
|
332
332
|
{
|
|
@@ -406,7 +406,7 @@
|
|
|
406
406
|
"type": {
|
|
407
407
|
"text": "boolean"
|
|
408
408
|
},
|
|
409
|
-
"description": "When enabled with `autoResponsive`,
|
|
409
|
+
"description": "When enabled with `autoResponsive`, the layout puts labels next to\nthe fields. If the layout is too narrow for a single column with a\nside label, the labels automatically return to their default position\nabove the fields.\n\nThe default value is `false`.",
|
|
410
410
|
"attribute": "labels-aside",
|
|
411
411
|
"inheritedFrom": {
|
|
412
412
|
"name": "FormLayoutMixin",
|
|
@@ -522,7 +522,7 @@
|
|
|
522
522
|
"type": {
|
|
523
523
|
"text": "boolean"
|
|
524
524
|
},
|
|
525
|
-
"description": "When enabled with `autoResponsive`,
|
|
525
|
+
"description": "When enabled with `autoResponsive`, the layout puts labels next to\nthe fields. If the layout is too narrow for a single column with a\nside label, the labels automatically return to their default position\nabove the fields.\n\nThe default value is `false`.",
|
|
526
526
|
"fieldName": "labelsAside",
|
|
527
527
|
"inheritedFrom": {
|
|
528
528
|
"name": "FormLayoutMixin",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/form-layout",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.4.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,19 +35,19 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.
|
|
39
|
-
"@vaadin/component-base": "25.
|
|
40
|
-
"@vaadin/vaadin-themable-mixin": "25.
|
|
38
|
+
"@vaadin/a11y-base": "25.4.0-alpha1",
|
|
39
|
+
"@vaadin/component-base": "25.4.0-alpha1",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "25.4.0-alpha1",
|
|
41
41
|
"lit": "^3.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@vaadin/aura": "25.
|
|
45
|
-
"@vaadin/chai-plugins": "25.
|
|
46
|
-
"@vaadin/custom-field": "25.
|
|
47
|
-
"@vaadin/test-runner-commands": "25.
|
|
44
|
+
"@vaadin/aura": "25.4.0-alpha1",
|
|
45
|
+
"@vaadin/chai-plugins": "25.4.0-alpha1",
|
|
46
|
+
"@vaadin/custom-field": "25.4.0-alpha1",
|
|
47
|
+
"@vaadin/test-runner-commands": "25.4.0-alpha1",
|
|
48
48
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
49
|
-
"@vaadin/text-field": "25.
|
|
50
|
-
"@vaadin/vaadin-lumo-styles": "25.
|
|
49
|
+
"@vaadin/text-field": "25.4.0-alpha1",
|
|
50
|
+
"@vaadin/vaadin-lumo-styles": "25.4.0-alpha1",
|
|
51
51
|
"sinon": "^22.0.0"
|
|
52
52
|
},
|
|
53
53
|
"customElements": "custom-elements.json",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "be38ec1866e96508f3f4591f95c949ef55903a34"
|
|
59
59
|
}
|
|
@@ -56,12 +56,14 @@ export class AutoResponsiveLayout extends AbstractLayout {
|
|
|
56
56
|
const { host } = this;
|
|
57
57
|
host.style.removeProperty('--_column-width');
|
|
58
58
|
host.style.removeProperty('--_max-columns');
|
|
59
|
-
host
|
|
59
|
+
host.removeAttribute('has-labels-aside');
|
|
60
60
|
host.$.layout.style.removeProperty('--_grid-rendered-column-count');
|
|
61
61
|
|
|
62
62
|
this.__children.forEach((child) => {
|
|
63
63
|
child.style.removeProperty('--_grid-colstart');
|
|
64
64
|
child.style.removeProperty('--_grid-colspan');
|
|
65
|
+
|
|
66
|
+
child.removeAttribute('data-form-layout-has-labels-aside');
|
|
65
67
|
});
|
|
66
68
|
}
|
|
67
69
|
|
|
@@ -133,7 +135,17 @@ export class AutoResponsiveLayout extends AbstractLayout {
|
|
|
133
135
|
host.style.setProperty('--_min-columns', props.minColumns);
|
|
134
136
|
host.style.setProperty('--_max-columns', Math.min(Math.max(props.minColumns, props.maxColumns), maxColumns));
|
|
135
137
|
|
|
136
|
-
|
|
138
|
+
const hasLabelsAside = props.labelsAside && this.__fitsLabelsAside;
|
|
139
|
+
host.toggleAttribute('has-labels-aside', hasLabelsAside);
|
|
140
|
+
|
|
141
|
+
children.forEach((child) => {
|
|
142
|
+
if (isBreakLine(child)) {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
child.toggleAttribute('data-form-layout-has-labels-aside', hasLabelsAside);
|
|
147
|
+
});
|
|
148
|
+
|
|
137
149
|
host.$.layout.style.setProperty('--_grid-rendered-column-count', this.__renderedColumnCount);
|
|
138
150
|
}
|
|
139
151
|
|
|
@@ -28,12 +28,13 @@ export const formItemStyles = css`
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
[part='label'] {
|
|
31
|
-
color: var(--vaadin-form-item-label-color, var(--vaadin-text-color));
|
|
31
|
+
color: var(--vaadin-form-item-label-color, var(--vaadin-input-field-label-color, var(--vaadin-text-color)));
|
|
32
32
|
flex: 0 0 auto;
|
|
33
|
-
font-size: var(--vaadin-form-item-label-font-size, inherit);
|
|
34
|
-
font-weight: var(--vaadin-form-item-label-font-weight, 500);
|
|
35
|
-
line-height: var(--vaadin-form-item-label-line-height, inherit);
|
|
33
|
+
font-size: var(--vaadin-form-item-label-font-size, var(--vaadin-input-field-label-font-size, inherit));
|
|
34
|
+
font-weight: var(--vaadin-form-item-label-font-weight, var(--vaadin-input-field-label-font-weight, 500));
|
|
35
|
+
line-height: var(--vaadin-form-item-label-line-height, var(--vaadin-input-field-label-line-height, inherit));
|
|
36
36
|
position: relative;
|
|
37
|
+
text-align: var(--_form-item-labels-aside, var(--_label-text-align, start));
|
|
37
38
|
width: var(--_form-item-labels-aside, var(--_label-width, 8em));
|
|
38
39
|
word-break: break-word;
|
|
39
40
|
box-sizing: border-box;
|
|
@@ -20,6 +20,7 @@ addGlobalStyles(
|
|
|
20
20
|
@layer vaadin.base {
|
|
21
21
|
html {
|
|
22
22
|
--vaadin-form-layout-label-spacing: var(--vaadin-gap-s);
|
|
23
|
+
--vaadin-form-layout-label-text-align: start;
|
|
23
24
|
--vaadin-form-layout-label-width: 8em;
|
|
24
25
|
--vaadin-form-layout-column-spacing: var(--vaadin-gap-l);
|
|
25
26
|
--vaadin-form-layout-row-spacing: var(--vaadin-gap-l);
|
|
@@ -32,6 +33,7 @@ export const formLayoutStyles = css`
|
|
|
32
33
|
:host {
|
|
33
34
|
/* Default values */
|
|
34
35
|
--_label-spacing: var(--vaadin-form-layout-label-spacing);
|
|
36
|
+
--_label-text-align: var(--vaadin-form-layout-label-text-align);
|
|
35
37
|
--_label-width: var(--vaadin-form-layout-label-width);
|
|
36
38
|
--_column-spacing: var(--vaadin-form-layout-column-spacing);
|
|
37
39
|
--_row-spacing: var(--vaadin-form-layout-row-spacing);
|
|
@@ -157,9 +159,13 @@ export const formLayoutStyles = css`
|
|
|
157
159
|
|
|
158
160
|
:host([auto-responsive][labels-aside]) {
|
|
159
161
|
--_max-width: var(--_max-width-labels-aside);
|
|
162
|
+
|
|
163
|
+
--vaadin-input-field-label-aside-width: var(--_label-width);
|
|
164
|
+
--vaadin-input-field-label-aside-gap: var(--_label-spacing);
|
|
165
|
+
--vaadin-input-field-label-aside-text-align: var(--_label-text-align);
|
|
160
166
|
}
|
|
161
167
|
|
|
162
|
-
:host([auto-responsive][labels-aside]) #layout
|
|
168
|
+
:host([auto-responsive][has-labels-aside]) #layout {
|
|
163
169
|
--_form-item-labels-above: ' '; /* false */
|
|
164
170
|
--_form-item-labels-aside: initial; /* true */
|
|
165
171
|
--_grid-column-width: var(--_column-width-labels-aside);
|
|
@@ -79,6 +79,20 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
|
|
|
79
79
|
* `label` | The slotted label element wrapper
|
|
80
80
|
* `required-indicator` | The `required` state indicator element
|
|
81
81
|
*
|
|
82
|
+
* The following custom CSS properties are available for styling:
|
|
83
|
+
*
|
|
84
|
+
* Custom CSS property |
|
|
85
|
+
* :--------------------------------------------------|
|
|
86
|
+
* | `--vaadin-input-field-label-color` |
|
|
87
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
88
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
89
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
90
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
91
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
92
|
+
*
|
|
93
|
+
* **Deprecation note:** The `--vaadin-form-item-label-*` properties are deprecated and will be removed
|
|
94
|
+
* in Vaadin 26. Use the `--vaadin-input-field-label-*` properties instead.
|
|
95
|
+
*
|
|
82
96
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
83
97
|
*/
|
|
84
98
|
declare class FormItem extends FormItemMixin(ThemableMixin(HTMLElement)) {}
|
package/src/vaadin-form-item.js
CHANGED
|
@@ -84,6 +84,20 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
|
|
|
84
84
|
* `label` | The slotted label element wrapper
|
|
85
85
|
* `required-indicator` | The `required` state indicator element
|
|
86
86
|
*
|
|
87
|
+
* The following custom CSS properties are available for styling:
|
|
88
|
+
*
|
|
89
|
+
* Custom CSS property |
|
|
90
|
+
* :--------------------------------------------------|
|
|
91
|
+
* | `--vaadin-input-field-label-color` |
|
|
92
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
93
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
94
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
95
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
96
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
97
|
+
*
|
|
98
|
+
* **Deprecation note:** The `--vaadin-form-item-label-*` properties are deprecated and will be removed
|
|
99
|
+
* in Vaadin 26. Use the `--vaadin-input-field-label-*` properties instead.
|
|
100
|
+
*
|
|
87
101
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
88
102
|
*
|
|
89
103
|
* @attr {string} theme - The theme variants to apply to the component.
|
|
@@ -143,19 +143,13 @@ export declare class FormLayoutMixinClass {
|
|
|
143
143
|
autoRows: boolean;
|
|
144
144
|
|
|
145
145
|
/**
|
|
146
|
-
* When enabled with `autoResponsive`,
|
|
147
|
-
*
|
|
148
|
-
*
|
|
149
|
-
*
|
|
146
|
+
* When enabled with `autoResponsive`, the layout puts labels next to
|
|
147
|
+
* the fields. If the layout is too narrow for a single column with a
|
|
148
|
+
* side label, the labels automatically return to their default position
|
|
149
|
+
* above the fields.
|
|
150
150
|
*
|
|
151
151
|
* The default value is `false`.
|
|
152
152
|
*
|
|
153
|
-
* To customize the label width and the gap between the label and the field,
|
|
154
|
-
* use the following CSS properties:
|
|
155
|
-
*
|
|
156
|
-
* - `--vaadin-form-layout-label-width`
|
|
157
|
-
* - `--vaadin-form-layout-label-spacing`
|
|
158
|
-
*
|
|
159
153
|
* @attr {boolean} labels-aside
|
|
160
154
|
*/
|
|
161
155
|
labelsAside: boolean;
|
|
@@ -185,19 +185,13 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
185
185
|
},
|
|
186
186
|
|
|
187
187
|
/**
|
|
188
|
-
* When enabled with `autoResponsive`,
|
|
189
|
-
*
|
|
190
|
-
*
|
|
191
|
-
*
|
|
188
|
+
* When enabled with `autoResponsive`, the layout puts labels next to
|
|
189
|
+
* the fields. If the layout is too narrow for a single column with a
|
|
190
|
+
* side label, the labels automatically return to their default position
|
|
191
|
+
* above the fields.
|
|
192
192
|
*
|
|
193
193
|
* The default value is `false`.
|
|
194
194
|
*
|
|
195
|
-
* To customize the label width and the gap between the label and the field,
|
|
196
|
-
* use the following CSS properties:
|
|
197
|
-
*
|
|
198
|
-
* - `--vaadin-form-layout-label-width`
|
|
199
|
-
* - `--vaadin-form-layout-label-spacing`
|
|
200
|
-
*
|
|
201
195
|
* @attr {boolean} labels-aside
|
|
202
196
|
*/
|
|
203
197
|
labelsAside: {
|
|
@@ -156,34 +156,61 @@ export * from './vaadin-form-layout-mixin.js';
|
|
|
156
156
|
*
|
|
157
157
|
* #### Customizing Label Position
|
|
158
158
|
*
|
|
159
|
-
* By default, Form Layout displays labels above the fields. To
|
|
160
|
-
*
|
|
161
|
-
* Then, you can enable the [`labelsAside`](#/elements/vaadin-form-layout#property-labelsAside)
|
|
162
|
-
* property:
|
|
159
|
+
* By default, Form Layout displays labels above the fields. To put labels next to the fields,
|
|
160
|
+
* enable the [`labelsAside`](#/elements/vaadin-form-layout#property-labelsAside) property:
|
|
163
161
|
*
|
|
164
162
|
* ```html
|
|
165
163
|
* <vaadin-form-layout auto-responsive labels-aside>
|
|
166
164
|
* <vaadin-form-row>
|
|
167
|
-
* <vaadin-
|
|
168
|
-
*
|
|
169
|
-
* <vaadin-text-field></vaadin-text-field>
|
|
170
|
-
* </vaadin-form-item>
|
|
171
|
-
* <vaadin-form-item>
|
|
172
|
-
* <label slot="label">Last Name</label>
|
|
173
|
-
* <vaadin-text-field></vaadin-text-field>
|
|
174
|
-
* </vaadin-form-item>
|
|
165
|
+
* <vaadin-text-field label="First Name"></vaadin-text-field>
|
|
166
|
+
* <vaadin-text-field label="Last Name"></vaadin-text-field>
|
|
175
167
|
* </vaadin-form-row>
|
|
176
168
|
* <vaadin-form-row>
|
|
177
|
-
* <vaadin-
|
|
178
|
-
* <label slot="label">Address</label>
|
|
179
|
-
* <vaadin-text-area></vaadin-text-area>
|
|
180
|
-
* </vaadin-form-item>
|
|
169
|
+
* <vaadin-text-area label="Address" colspan="2"></vaadin-text-area>
|
|
181
170
|
* </vaadin-form-row>
|
|
182
171
|
* </vaadin-form-layout>
|
|
183
172
|
* ```
|
|
184
173
|
*
|
|
185
|
-
*
|
|
186
|
-
* the default position above the fields
|
|
174
|
+
* When there isn't enough space for side labels, Form Layout returns the labels to
|
|
175
|
+
* the default position above the fields.
|
|
176
|
+
*
|
|
177
|
+
* All Vaadin input field components placed directly in the Form Layout support labels-aside
|
|
178
|
+
* mode out of the box, showing their label next to the field. Checkable fields, such as
|
|
179
|
+
* `<vaadin-checkbox>`, work differently: their label remains in place, and Form Layout only
|
|
180
|
+
* indents such fields so they align with the input column.
|
|
181
|
+
*
|
|
182
|
+
* Any other components, such as buttons or custom components, are just placed at the start of
|
|
183
|
+
* the label column. How they should be laid out in this mode is left to the developer and can
|
|
184
|
+
* be handled in one of two ways:
|
|
185
|
+
*
|
|
186
|
+
* 1. Wrap the component in a Form Item, with or without providing a label. The Form Item
|
|
187
|
+
* reserves space for the label, so the component ends up in the input column, aligned
|
|
188
|
+
* with the other fields:
|
|
189
|
+
*
|
|
190
|
+
* ```html
|
|
191
|
+
* <vaadin-form-item>
|
|
192
|
+
* <label slot="label">Name</label>
|
|
193
|
+
* <input type="text" />
|
|
194
|
+
* </vaadin-form-item>
|
|
195
|
+
*
|
|
196
|
+
* <vaadin-form-item>
|
|
197
|
+
* <vaadin-button>Submit</vaadin-button>
|
|
198
|
+
* </vaadin-form-item>
|
|
199
|
+
* ```
|
|
200
|
+
*
|
|
201
|
+
* 2. Write custom CSS. When labels are rendered next to fields, Form Layout sets the
|
|
202
|
+
* `has-labels-aside` attribute on its host element and the `data-form-layout-has-labels-aside`
|
|
203
|
+
* attribute on children. You can rely on these attributes to adapt your components to
|
|
204
|
+
* labels-aside mode, for example:
|
|
205
|
+
*
|
|
206
|
+
* ```css
|
|
207
|
+
* vaadin-button[data-form-layout-has-labels-aside] {
|
|
208
|
+
* margin-inline-start: calc(
|
|
209
|
+
* var(--vaadin-form-layout-label-width) +
|
|
210
|
+
* var(--vaadin-form-layout-label-spacing)
|
|
211
|
+
* );
|
|
212
|
+
* }
|
|
213
|
+
* ```
|
|
187
214
|
*
|
|
188
215
|
* ### CSS Properties Reference
|
|
189
216
|
*
|
|
@@ -194,7 +221,14 @@ export * from './vaadin-form-layout-mixin.js';
|
|
|
194
221
|
* `--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`
|
|
195
222
|
* `--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`
|
|
196
223
|
* `--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`
|
|
197
|
-
* `--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the
|
|
224
|
+
* `--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the field when labels are displayed aside | `1em`
|
|
225
|
+
* `--vaadin-form-layout-label-text-align` | Alignment of the label when labels are displayed aside | `start`
|
|
226
|
+
*
|
|
227
|
+
* The following state attributes are available for styling:
|
|
228
|
+
*
|
|
229
|
+
* Attribute | Description
|
|
230
|
+
* ---|---
|
|
231
|
+
* `has-labels-aside` | Set when the `labelsAside` property is enabled and there is enough space to display labels next to the fields
|
|
198
232
|
*/
|
|
199
233
|
declare class FormLayout extends FormLayoutMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
|
|
200
234
|
|
|
@@ -158,34 +158,61 @@ import { FormLayoutMixin } from './vaadin-form-layout-mixin.js';
|
|
|
158
158
|
*
|
|
159
159
|
* #### Customizing Label Position
|
|
160
160
|
*
|
|
161
|
-
* By default, Form Layout displays labels above the fields. To
|
|
162
|
-
*
|
|
163
|
-
* Then, you can enable the [`labelsAside`](#/elements/vaadin-form-layout#property-labelsAside)
|
|
164
|
-
* property:
|
|
161
|
+
* By default, Form Layout displays labels above the fields. To put labels next to the fields,
|
|
162
|
+
* enable the [`labelsAside`](#/elements/vaadin-form-layout#property-labelsAside) property:
|
|
165
163
|
*
|
|
166
164
|
* ```html
|
|
167
165
|
* <vaadin-form-layout auto-responsive labels-aside>
|
|
168
166
|
* <vaadin-form-row>
|
|
169
|
-
* <vaadin-
|
|
170
|
-
*
|
|
171
|
-
* <vaadin-text-field></vaadin-text-field>
|
|
172
|
-
* </vaadin-form-item>
|
|
173
|
-
* <vaadin-form-item>
|
|
174
|
-
* <label slot="label">Last Name</label>
|
|
175
|
-
* <vaadin-text-field></vaadin-text-field>
|
|
176
|
-
* </vaadin-form-item>
|
|
167
|
+
* <vaadin-text-field label="First Name"></vaadin-text-field>
|
|
168
|
+
* <vaadin-text-field label="Last Name"></vaadin-text-field>
|
|
177
169
|
* </vaadin-form-row>
|
|
178
170
|
* <vaadin-form-row>
|
|
179
|
-
* <vaadin-
|
|
180
|
-
* <label slot="label">Address</label>
|
|
181
|
-
* <vaadin-text-area></vaadin-text-area>
|
|
182
|
-
* </vaadin-form-item>
|
|
171
|
+
* <vaadin-text-area label="Address" colspan="2"></vaadin-text-area>
|
|
183
172
|
* </vaadin-form-row>
|
|
184
173
|
* </vaadin-form-layout>
|
|
185
174
|
* ```
|
|
186
175
|
*
|
|
187
|
-
*
|
|
188
|
-
* the default position above the fields
|
|
176
|
+
* When there isn't enough space for side labels, Form Layout returns the labels to
|
|
177
|
+
* the default position above the fields.
|
|
178
|
+
*
|
|
179
|
+
* All Vaadin input field components placed directly in the Form Layout support labels-aside
|
|
180
|
+
* mode out of the box, showing their label next to the field. Checkable fields, such as
|
|
181
|
+
* `<vaadin-checkbox>`, work differently: their label remains in place, and Form Layout only
|
|
182
|
+
* indents such fields so they align with the input column.
|
|
183
|
+
*
|
|
184
|
+
* Any other components, such as buttons or custom components, are just placed at the start of
|
|
185
|
+
* the label column. How they should be laid out in this mode is left to the developer and can
|
|
186
|
+
* be handled in one of two ways:
|
|
187
|
+
*
|
|
188
|
+
* 1. Wrap the component in a Form Item, with or without providing a label. The Form Item
|
|
189
|
+
* reserves space for the label, so the component ends up in the input column, aligned
|
|
190
|
+
* with the other fields:
|
|
191
|
+
*
|
|
192
|
+
* ```html
|
|
193
|
+
* <vaadin-form-item>
|
|
194
|
+
* <label slot="label">Name</label>
|
|
195
|
+
* <input type="text" />
|
|
196
|
+
* </vaadin-form-item>
|
|
197
|
+
*
|
|
198
|
+
* <vaadin-form-item>
|
|
199
|
+
* <vaadin-button>Submit</vaadin-button>
|
|
200
|
+
* </vaadin-form-item>
|
|
201
|
+
* ```
|
|
202
|
+
*
|
|
203
|
+
* 2. Write custom CSS. When labels are rendered next to fields, Form Layout sets the
|
|
204
|
+
* `has-labels-aside` attribute on its host element and the `data-form-layout-has-labels-aside`
|
|
205
|
+
* attribute on children. You can rely on these attributes to adapt your components to
|
|
206
|
+
* labels-aside mode, for example:
|
|
207
|
+
*
|
|
208
|
+
* ```css
|
|
209
|
+
* vaadin-button[data-form-layout-has-labels-aside] {
|
|
210
|
+
* margin-inline-start: calc(
|
|
211
|
+
* var(--vaadin-form-layout-label-width) +
|
|
212
|
+
* var(--vaadin-form-layout-label-spacing)
|
|
213
|
+
* );
|
|
214
|
+
* }
|
|
215
|
+
* ```
|
|
189
216
|
*
|
|
190
217
|
* ### CSS Properties Reference
|
|
191
218
|
*
|
|
@@ -196,7 +223,14 @@ import { FormLayoutMixin } from './vaadin-form-layout-mixin.js';
|
|
|
196
223
|
* `--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`
|
|
197
224
|
* `--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`
|
|
198
225
|
* `--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`
|
|
199
|
-
* `--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the
|
|
226
|
+
* `--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the field when labels are displayed aside | `1em`
|
|
227
|
+
* `--vaadin-form-layout-label-text-align` | Alignment of the label when labels are displayed aside | `start`
|
|
228
|
+
*
|
|
229
|
+
* The following state attributes are available for styling:
|
|
230
|
+
*
|
|
231
|
+
* Attribute | Description
|
|
232
|
+
* ---|---
|
|
233
|
+
* `has-labels-aside` | Set when the `labelsAside` property is enabled and there is enough space to display labels next to the fields
|
|
200
234
|
*
|
|
201
235
|
* @attr {string} theme - The theme variants to apply to the component.
|
|
202
236
|
* @customElement vaadin-form-layout
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/form-layout",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.4.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-form-item",
|
|
11
|
-
"description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label aside</label>\n <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n <label slot=\"label\">Label on top</label>\n <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label</label>\n <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` attribute can be used to target the label on top state:\n\n```css\nvaadin-form-item[label-position=\"top\"] {\n padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`label` | The slotted label element wrapper\n`required-indicator` | The `required` state indicator element\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
11
|
+
"description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label aside</label>\n <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n <label slot=\"label\">Label on top</label>\n <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label</label>\n <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` attribute can be used to target the label on top state:\n\n```css\nvaadin-form-item[label-position=\"top\"] {\n padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`label` | The slotted label element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n\n**Deprecation note:** The `--vaadin-form-item-label-*` properties are deprecated and will be removed\nin Vaadin 26. Use the `--vaadin-input-field-label-*` properties instead.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "theme",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"name": "vaadin-form-layout",
|
|
30
|
-
"description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\" value=\"jane.doe@example.com\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <br>\n\n <vaadin-form-item>\n <label slot=\"label\">Confirm Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/25.
|
|
30
|
+
"description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\" value=\"jane.doe@example.com\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <br>\n\n <vaadin-form-item>\n <label slot=\"label\">Confirm Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-maxColumns) properties define the width of\neach column and the maximum number of columns that the component can create. By default, the component\ncreates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`\nCSS custom property, if defined.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance, set the\n`auto-responsive` attribute:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n</vaadin-form-layout>\n```\n\nYou can also enable it for all instances by enabling the following feature flag\nbefore `<vaadin-form-layout>` elements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```\n\n#### Organizing Fields into Rows\n\nBy default, each field is placed on a new row. To organize fields into rows, you can either:\n\n1. Manually wrap fields into [`<vaadin-form-row>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-autoRows) property to\n let Form Layout automatically arrange fields in available columns, wrapping to a new\n row when necessary. `<br>` elements can be used to force a new row.\n\nHere is an example of using `<vaadin-form-row>`:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-form-row>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n </vaadin-form-row>\n <vaadin-form-row>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n </vaadin-form-row>\n</vaadin-form-layout>\n```\n\n#### Expanding Columns and Fields\n\nYou can configure Form Layout to expand columns to evenly fill any remaining space after\nall fixed-width columns have been created.\nTo enable this, set the [`expandColumns`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-expandColumns)\nproperty to `true`.\n\nAlso, Form Layout can stretch fields to make them take up all available space within columns.\nTo enable this, set the [`expandFields`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-expandFields)\nproperty to `true`.\n\n#### Customizing Label Position\n\nBy default, Form Layout displays labels above the fields. To put labels next to the fields,\nenable the [`labelsAside`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-labelsAside) property:\n\n```html\n<vaadin-form-layout auto-responsive labels-aside>\n <vaadin-form-row>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n </vaadin-form-row>\n <vaadin-form-row>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n </vaadin-form-row>\n</vaadin-form-layout>\n```\n\nWhen there isn't enough space for side labels, Form Layout returns the labels to\nthe default position above the fields.\n\nAll Vaadin input field components placed directly in the Form Layout support labels-aside\nmode out of the box, showing their label next to the field. Checkable fields, such as\n`<vaadin-checkbox>`, work differently: their label remains in place, and Form Layout only\nindents such fields so they align with the input column.\n\nAny other components, such as buttons or custom components, are just placed at the start of\nthe label column. How they should be laid out in this mode is left to the developer and can\nbe handled in one of two ways:\n\n1. Wrap the component in a Form Item, with or without providing a label. The Form Item\n reserves space for the label, so the component ends up in the input column, aligned\n with the other fields:\n\n ```html\n <vaadin-form-item>\n <label slot=\"label\">Name</label>\n <input type=\"text\" />\n </vaadin-form-item>\n\n <vaadin-form-item>\n <vaadin-button>Submit</vaadin-button>\n </vaadin-form-item>\n ```\n\n2. Write custom CSS. When labels are rendered next to fields, Form Layout sets the\n `has-labels-aside` attribute on its host element and the `data-form-layout-has-labels-aside`\n attribute on children. You can rely on these attributes to adapt your components to\n labels-aside mode, for example:\n\n ```css\n vaadin-button[data-form-layout-has-labels-aside] {\n margin-inline-start: calc(\n var(--vaadin-form-layout-label-width) +\n var(--vaadin-form-layout-label-spacing)\n );\n }\n ```\n\n### CSS Properties Reference\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`\n`--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`\n`--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`\n`--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the field when labels are displayed aside | `1em`\n`--vaadin-form-layout-label-text-align` | Alignment of the label when labels are displayed aside | `start`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---|---\n`has-labels-aside` | Set when the `labelsAside` property is enabled and there is enough space to display labels next to the fields",
|
|
31
31
|
"attributes": [
|
|
32
32
|
{
|
|
33
33
|
"name": "auto-responsive",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
},
|
|
77
77
|
{
|
|
78
78
|
"name": "labels-aside",
|
|
79
|
-
"description": "When enabled with `autoResponsive`,
|
|
79
|
+
"description": "When enabled with `autoResponsive`, the layout puts labels next to\nthe fields. If the layout is too narrow for a single column with a\nside label, the labels automatically return to their default position\nabove the fields.\n\nThe default value is `false`.",
|
|
80
80
|
"value": {
|
|
81
81
|
"type": [
|
|
82
82
|
"boolean"
|
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
},
|
|
161
161
|
{
|
|
162
162
|
"name": "labelsAside",
|
|
163
|
-
"description": "When enabled with `autoResponsive`,
|
|
163
|
+
"description": "When enabled with `autoResponsive`, the layout puts labels next to\nthe fields. If the layout is too narrow for a single column with a\nside label, the labels automatically return to their default position\nabove the fields.\n\nThe default value is `false`.",
|
|
164
164
|
"value": {
|
|
165
165
|
"type": [
|
|
166
166
|
"boolean"
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/form-layout",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.4.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-form-item",
|
|
19
|
-
"description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label aside</label>\n <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n <label slot=\"label\">Label on top</label>\n <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label</label>\n <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` attribute can be used to target the label on top state:\n\n```css\nvaadin-form-item[label-position=\"top\"] {\n padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`label` | The slotted label element wrapper\n`required-indicator` | The `required` state indicator element\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
19
|
+
"description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label aside</label>\n <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n <label slot=\"label\">Label on top</label>\n <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label</label>\n <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` attribute can be used to target the label on top state:\n\n```css\nvaadin-form-item[label-position=\"top\"] {\n padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`label` | The slotted label element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n\n**Deprecation note:** The `--vaadin-form-item-label-*` properties are deprecated and will be removed\nin Vaadin 26. Use the `--vaadin-input-field-label-*` properties instead.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": []
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
"name": "vaadin-form-layout",
|
|
25
|
-
"description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\" value=\"jane.doe@example.com\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <br>\n\n <vaadin-form-item>\n <label slot=\"label\">Confirm Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/25.
|
|
25
|
+
"description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\" value=\"jane.doe@example.com\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <br>\n\n <vaadin-form-item>\n <label slot=\"label\">Confirm Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-maxColumns) properties define the width of\neach column and the maximum number of columns that the component can create. By default, the component\ncreates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`\nCSS custom property, if defined.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance, set the\n`auto-responsive` attribute:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n</vaadin-form-layout>\n```\n\nYou can also enable it for all instances by enabling the following feature flag\nbefore `<vaadin-form-layout>` elements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```\n\n#### Organizing Fields into Rows\n\nBy default, each field is placed on a new row. To organize fields into rows, you can either:\n\n1. Manually wrap fields into [`<vaadin-form-row>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-autoRows) property to\n let Form Layout automatically arrange fields in available columns, wrapping to a new\n row when necessary. `<br>` elements can be used to force a new row.\n\nHere is an example of using `<vaadin-form-row>`:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-form-row>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n </vaadin-form-row>\n <vaadin-form-row>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n </vaadin-form-row>\n</vaadin-form-layout>\n```\n\n#### Expanding Columns and Fields\n\nYou can configure Form Layout to expand columns to evenly fill any remaining space after\nall fixed-width columns have been created.\nTo enable this, set the [`expandColumns`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-expandColumns)\nproperty to `true`.\n\nAlso, Form Layout can stretch fields to make them take up all available space within columns.\nTo enable this, set the [`expandFields`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-expandFields)\nproperty to `true`.\n\n#### Customizing Label Position\n\nBy default, Form Layout displays labels above the fields. To put labels next to the fields,\nenable the [`labelsAside`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-form-layout#property-labelsAside) property:\n\n```html\n<vaadin-form-layout auto-responsive labels-aside>\n <vaadin-form-row>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n </vaadin-form-row>\n <vaadin-form-row>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n </vaadin-form-row>\n</vaadin-form-layout>\n```\n\nWhen there isn't enough space for side labels, Form Layout returns the labels to\nthe default position above the fields.\n\nAll Vaadin input field components placed directly in the Form Layout support labels-aside\nmode out of the box, showing their label next to the field. Checkable fields, such as\n`<vaadin-checkbox>`, work differently: their label remains in place, and Form Layout only\nindents such fields so they align with the input column.\n\nAny other components, such as buttons or custom components, are just placed at the start of\nthe label column. How they should be laid out in this mode is left to the developer and can\nbe handled in one of two ways:\n\n1. Wrap the component in a Form Item, with or without providing a label. The Form Item\n reserves space for the label, so the component ends up in the input column, aligned\n with the other fields:\n\n ```html\n <vaadin-form-item>\n <label slot=\"label\">Name</label>\n <input type=\"text\" />\n </vaadin-form-item>\n\n <vaadin-form-item>\n <vaadin-button>Submit</vaadin-button>\n </vaadin-form-item>\n ```\n\n2. Write custom CSS. When labels are rendered next to fields, Form Layout sets the\n `has-labels-aside` attribute on its host element and the `data-form-layout-has-labels-aside`\n attribute on children. You can rely on these attributes to adapt your components to\n labels-aside mode, for example:\n\n ```css\n vaadin-button[data-form-layout-has-labels-aside] {\n margin-inline-start: calc(\n var(--vaadin-form-layout-label-width) +\n var(--vaadin-form-layout-label-spacing)\n );\n }\n ```\n\n### CSS Properties Reference\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`\n`--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`\n`--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`\n`--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the field when labels are displayed aside | `1em`\n`--vaadin-form-layout-label-text-align` | Alignment of the label when labels are displayed aside | `start`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---|---\n`has-labels-aside` | Set when the `labelsAside` property is enabled and there is enough space to display labels next to the fields",
|
|
26
26
|
"extension": true,
|
|
27
27
|
"attributes": [
|
|
28
28
|
{
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
"name": "?labelsAside",
|
|
65
|
-
"description": "When enabled with `autoResponsive`,
|
|
65
|
+
"description": "When enabled with `autoResponsive`, the layout puts labels next to\nthe fields. If the layout is too narrow for a single column with a\nside label, the labels automatically return to their default position\nabove the fields.\n\nThe default value is `false`.",
|
|
66
66
|
"value": {
|
|
67
67
|
"kind": "expression"
|
|
68
68
|
}
|