Description: The oj-c-form-layout component provides a responsive layout capability to lay out child\nelements in the row or column direction where the number of columns displayed depends on the available\nwidth of the container. Child components are responsible for rendering the label with the alignment as\nspecified by the oj-c-form-layout's label-edge property, which the child components consume.
\n\n<oj-c-form-layout columns=\"2\">\n <oj-c-input-text label-hint=\"First Name\"></oj-c-input-text>\n <oj-c-input-text label-hint=\"Last Name\"></oj-c-input-text>\n <oj-c-input-text label-hint=\"address\" column-span=\"2\"></oj-c-input-text>\n</oj-c-form-layout>\nSpecifies how the child form components should position their labels.\n
\n\nIf the property value is not set either directly on the component or inherited from\na parent form layout, then the property is treated as if its value were 'inside'.\n
\n\nWhen using the oj-c-form-layout custom element inside of a VDOM application, this property will not propagate down to the child components.\nThis is because binding propagation is Knockout-based, and VDOM applications are not Knockout-based.\n
", "ojvalues": [ { "name": "inside", "description": "The label floats over the input element, but moves up on focus or when the component has a value (default, if unspecified).", "displayName": "Inside", "type": { "names": [ "string" ] } }, { "name": "start", "description": "The label will be placed before the start of the component.", "displayName": "Start", "type": { "names": [ "string" ] } }, { "name": "top", "description": "The label will be placed on top of the component.", "displayName": "Top", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true }, { "id": "oj-c.FormLayout#labelStartWidth", "name": "labelStartWidth", "memberof": "oj-c.FormLayout", "meta": { "filename": "form-layout.tsx", "path": "web/components/oj-c/form-layout" }, "kind": "member", "longname": "oj-c.FormLayout#labelStartWidth", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojdisplayname": "Label Start Width", "ojshortdesc": "The width of the label when labelEdge is 'start'.", "description": "The width of the label when labelEdge is 'start'.
\n This attribute accepts values of type\n0 | `--${string}` | `${number}%` | `${number}x` | `calc(${string})`
\nIf the property value is not set either directly on the component or inherited from\na parent form layout, then the property is treated as if its value were '33%'.\n
\n\nWhen using the oj-c-form-layout custom element inside of a VDOM application, this property will not propagate down to the child components.\nThis is because binding propagation is Knockout-based, and VDOM applications are not Knockout-based.\n
" }, { "id": "oj-c.FormLayout#labelWrapping", "name": "labelWrapping", "memberof": "oj-c.FormLayout", "meta": { "filename": "form-layout.tsx", "path": "web/components/oj-c/form-layout" }, "kind": "member", "longname": "oj-c.FormLayout#labelWrapping", "scope": "instance", "type": { "names": [ "\"truncate\"", "\"wrap\"" ] }, "optional": true, "ojdisplayname": "Label Wrapping", "ojshortdesc": "Should the labels wrap or truncate when there is not enough available space.", "description": "\nShould the labels wrap or truncate when there is not enough available space.\n
\n\nIf the property value is not set either directly on the component or inherited from\na parent form layout, then the property is treated as if its value were 'wrap'.\n
\n\nWhen using the oj-c-form-layout custom element inside of a VDOM application, this property will not propagate down to the child components.\nThis is because binding propagation is Knockout-based, and VDOM applications are not Knockout-based.\n
", "tsdeprecated": [ { "type": "deprecated", "since": "18.0.0", "description": "Label truncation for 'start' and 'top' aligned labels is no longer recommended by the Redwood Design System. The default for labelWrapping was 'wrap' and that is now the only suggested pattern by UX design for 'start' and 'top' aligned labels. 'inside' aligned labels are always truncated per UX design and are not affected by this property's value." } ], "ojvalues": [ { "name": "truncate", "description": "Label will truncate if needed.", "displayName": "Truncate", "type": { "names": [ "string" ] } }, { "name": "wrap", "description": "Label will wrap if needed.", "displayName": "Wrap", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true }, { "id": "oj-c.FormLayout#maxColumns", "name": "maxColumns", "memberof": "oj-c.FormLayout", "meta": { "filename": "form-layout.tsx", "path": "web/components/oj-c/form-layout" }, "kind": "member", "longname": "oj-c.FormLayout#maxColumns", "scope": "instance", "type": { "names": [ "number" ] }, "optional": true, "ojdisplayname": "Max Columns", "ojshortdesc": "Specifies how many columns should be displayed (responsive). This prop is ignored if columns has a positive value.", "description": "Specifies how many columns should be displayed.\nThis property is used when the actual number of columns rendered\nis responsive and depends on the container's available width.\nNote that maxColumns will be ignored if columns has a positive value.", "defaultvalue": 1 }, { "id": "oj-c.FormLayout#readonly", "name": "readonly", "memberof": "oj-c.FormLayout", "meta": { "filename": "form-layout.tsx", "path": "web/components/oj-c/form-layout" }, "kind": "member", "longname": "oj-c.FormLayout#readonly", "scope": "instance", "type": { "names": [ "boolean" ] }, "optional": true, "ojdisplayname": "Readonly", "ojshortdesc": "Whether the child components should be rendered as readonly.", "description": "\nWhether the child components should be rendered as readonly.\n
\n\nIf the property value is not set either directly on the component or inherited from\na parent form layout, then the property is treated as if its value were 'false'.\n
\n\nWhen using the oj-c-form-layout custom element inside of a VDOM application, this property will not propagate down to the child components.\nThis is because binding propagation is Knockout-based, and VDOM applications are not Knockout-based.\n
" }, { "id": "oj-c.FormLayout#userAssistanceDensity", "name": "userAssistanceDensity", "memberof": "oj-c.FormLayout", "meta": { "filename": "form-layout.tsx", "path": "web/components/oj-c/form-layout" }, "kind": "member", "longname": "oj-c.FormLayout#userAssistanceDensity", "scope": "instance", "type": { "names": [ "\"compact\"", "\"reflow\"", "\"efficient\"" ] }, "optional": true, "ojdisplayname": "User Assistance Density", "ojshortdesc": "Specifies the density of the children form component's user assistance presentation.", "description": "\nSpecifies the density of the children form component's user assistance presentation. It can be shown inline with\nreserved rows to prevent reflow if a user assistance text shows up, inline without reserved rows that would\nreflow if a user assistance text shows up, or it can be shown compactly in a popup instead.\n
\n\nIf the property value is not set either directly on the component or inherited from\na parent form layout, then the property is treated as if its value were \"efficient\".\n
\n\nWhen using the oj-c-form-layout custom element inside of a VDOM application, this property will not propagate down to the child components.\nThis is because binding propagation is Knockout-based, and VDOM applications are not Knockout-based.\n
", "ojvalues": [ { "name": "reflow", "description": "Messages, help, hints, and required are all shown inline under the field with no reserved space.", "displayName": "Reflow", "type": { "names": [ "string" ] } }, { "name": "efficient", "description": "Messages, help, hints, and required are all shown inline under the field with reserved space.", "displayName": "Efficient", "type": { "names": [ "string" ] } }, { "name": "compact", "description": "Messages, help, hints, and required will not be shown inline; they will show in a mode that keeps the screen more compact, like a popup for the messages, and a required icon to indicate Required.", "displayName": "Compact", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true }, { "id": "oj-c.FormLayout#setProperty", "name": "setProperty", "memberof": "oj-c.FormLayout", "meta": { "filename": "form-layout.tsx", "path": "web/components/oj-c/form-layout" }, "kind": "function", "longname": "oj-c.FormLayout#setProperty", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "params": [ { "name": "property", "description": "The property name to set. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } }, { "name": "value", "description": "The new value to set the property to.", "type": { "names": [ "any" ] } } ] }, { "id": "oj-c.FormLayout#getProperty", "name": "getProperty", "memberof": "oj-c.FormLayout", "meta": { "filename": "form-layout.tsx", "path": "web/components/oj-c/form-layout" }, "kind": "function", "longname": "oj-c.FormLayout#getProperty", "scope": "instance", "returns": [ { "type": { "names": [ "any" ] } } ], "ojshortdesc": "Retrieves the value of a property or a subproperty.", "description": "Retrieves the value of a property or a subproperty.", "params": [ { "name": "property", "description": "The property name to get. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } } ] }, { "id": "oj-c.FormLayout#setProperties", "name": "setProperties", "memberof": "oj-c.FormLayout", "meta": { "filename": "form-layout.tsx", "path": "web/components/oj-c/form-layout" }, "kind": "function", "longname": "oj-c.FormLayout#setProperties", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Performs a batch set of properties.", "description": "Performs a batch set of properties.", "params": [ { "name": "properties", "description": "An object containing the property and value pairs to set.", "type": { "names": [ "object" ] } } ] }, { "id": "oj-c.FormLayout#Default", "name": "Default", "memberof": "oj-c.FormLayout", "meta": { "filename": "form-layout.tsx", "path": "web/components/oj-c/form-layout" }, "kind": "member", "longname": "oj-c.FormLayout#Default", "scope": "instance", "ojdisplayname": "default", "description": "The default slot is the content of the form layout. The oj-c-form-layout element expects core pack form component children for the default slot.", "ojshortdesc": "The default slot is the content of the form layout. The oj-c-form-layout element expects core pack form component children for the default slot.", "ojchild": true } ]