Number Component

Last updated: 4 months ago

Category: Form

The 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.

Basic Usage

The oc-number tag represents a number input control, which is an enhanced wrapper around the native type=number input.

Setting Initial Values

There are two ways to set initial values:

1. Using the value attribute
2. Placing the value directly inside the tag

Setting Value Range

You can use min and max attributes just like with native type=number inputs.

Using Step Increments

You can use the step attribute just like with native type=number inputs, supporting decimal values.

Disabled State

The disabled state of the number component is set via the disabled attribute.

Key characteristics of disabled state:

1. Lighter color
2. Non-clickable

A similar attribute is readonly.

Size Options

The number field component's size can be set via the size attribute, supporting sm, md (default), and lg sizes.

• size=sm: Height 24px (2.4rem)
• size=md: Height 40px (4.0rem)
• size=lg: Height 56px (5.6rem)

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')})