Number Component: More Display Variants, Validation, Event, and Method Usage Examples
Category: ExamplesThe number input component differs from the text input component in that it only accepts numerical values. Its usage is the same as a form field with type='number', with identical attributes including min, max, step, etc. It supports validation, caching, and basic operations such as reset, set, and clear.
Layout Options
Currently supports two layout styles. The default simulates a text input box. Use the layout attribute to change layouts. Supported values:
Customizing Borders
We can use CSS variables to customize the outer border of the number input.
Using Labels
Currently there are three known layouts. When using label, a field title will be added before the input.
Full Width
If the parent container's width is limited, consider adding the full attribute to span the full width.
Form Container
This framework uses the _field container to build form sections. The number component can be placed inside the _field-input container.
Using Tips
Like other form components, the number component can use tips. The tips content is determined by the min and max attributes. Display conditions:
To modify the tips template text, use lang.min, lang.max and lang.exceed settings.
Getting Values
You can get component properties like name, value, disabled, and readOnly just like with native elements.
Note: The O in readOnly is uppercase.
Validation
The validation module works with the number component. Validation types are typically required (default) or than type validation. Recommended to use trigger=input activation.
Operation Methods
Built-in common methods include reset(), clear(), and set(data). Based on these methods, the component provides corresponding listener events.
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.