Fields Component
Category: FormSingle-line form field combination component that groups multiple form fields into a unified whole
Preface
To facilitate rapid form filling, it's often necessary to group related form fields together. Alternatively, to fully convey contextual information about a form field, explaining its purpose to users, a single-line mixed form field component provides an effective solution.
This component combines common form fields with optimized styling and adaptive handling.
Basic Usage
Place other regular single-line form fields within the oc-fields tag.
- Output
- HTML
Field Combinations
While a single field doesn't demonstrate the component's full capability, typically multiple fields are combined based on scenarios. Supported field types include: oc-radio, oc-checkbox, oc-radios, oc-checkboxes, oc-file, oc-datetime, oc-select, and oc-number.
Manual Layout
The component uses flexbox layout where fields automatically distribute space. For fixed dimensions, use inline style or built-in class names.
- Output
- HTML
Using Labels
The label property indicates the group's purpose and always appears at the beginning.
- Output
- HTML
Using Units
The unit property specifies measurement units and always appears at the end.
- Output
- HTML
Global Button
Supports a global oc-btn component that's always appended to the end.
- Output
- HTML
When both unit and global button are present, the unit appears before the button.
- Output
- HTML
Disabled State
Adding the disabled attribute disables all input fields.
- Output
- HTML
Divider Lines
Add dividable attribute to separate fields with vertical dividers.
- Output
- HTML
Field Connectors
For fields with logical continuity, use connector attribute to add joining characters.
- Output
- HTML
Sizing
Set size via size property with three options: sm, md (default), and lg.
- Output
- HTML
Alignment
Fields are left-aligned by default. Set alignment via align property with values: left, center, or right.
- Output
- HTML
Full Width
Use full attribute to make the component span its parent container's width.
- Output
- HTML
Custom Content
The component fundamentally acts as a single-line container - any single-line element can be placed inside, though custom styling may be required.
Using Cache
When modifying element properties or values, if you need to cache data to restore previous properties and values when reloading the page, use the stor-name attribute. However, ensure this attribute value is unique in the browser cache.
Attributes
| Attribute | Type | Options | Default | Description |
|---|---|---|---|---|
| disabled | boolean | - | false | Disabled state |
| dividable | boolean | - | false | Whether to use dividers between children |
| connector | boolean | - | - | Connector between child elements |
| full | boolean | - | - | Full width display |
| align | string | left/right/center | - | Text alignment |
| size | string | sm/md/lg | md | Component size |
| label | string | - | - | Group title |
| unit | string | - | - | Measurement unit |
| shape | string | radius/round/square | radius | Border style |
Common Methods
Common component methods:
set: Set properties (takes key-value pairs or array)reset: Reset properties (no params)clear: Clear properties and values (no params)
Basic usage: CompElem.reset()
Common Events
Common component events:
connected: Component connected (no params)disconnected: Component disconnected (no params)adopted: Component moved (no params)set: Property set (receives value)cleared: Property cleared (no params)reset: Property reset (no params)
Basic usage: CompElem.on('connected',()=>{console.log('connected')})
