Select Component

Last updated: 1 month ago

Category: Form

The select component supports both single and multiple selection, perfectly replacing native select-single and select-multiple components; it features fuzzy search and auto-completion.

Basic Usage

Use the oc-select tag to create an empty single-select dropdown menu component. Typically, you need to provide a dropdown list for selection by specifying comma-separated options in the content attribute.

List Nodes

For more complex data structures, you can place the data inside child nodes. Besides using the native select element to provide list data, you can also use datalist or ul/ol elements to supply the selection options.

Simple Grouping

The native select element supports hierarchical grouping through the optgroup tag, which can be used directly to create two-level grouping.

Multiple Selection

Use the multiple attribute to enable multi-select functionality.

Sizes

Three sizes are supported via the size attribute:

• sm (32px/3.2rem height)
• md (40px/4.0rem height, default)
• lg (56px/5.6rem height)

Disabled State

Set the disabled attribute to disable the component.

Attributes

This component encapsulates the built-in instance, and its attributes are consistent with the parameters of the built-in instance. You can click here to view all parameters.

Several important notes:

1. All component attributes should be lowercase.
2. Attribute values must be in string format.
3. If an attribute value is an object, the surrounding { and } symbols can be omitted.
4. For attribute names that are verb-object structures or composed of two words, use hyphens to separate them. For example:
   • Module parameter contType (if exists) should be written as cont-type in component attributes
   • Parameter b4Init should be written as b4-init in attributes
5. All methods, events, and variables can be accessed through the built-in instance (typically via this.ins).
6. When data cannot be passed through component attributes (e.g., due to nested single/double quote issues), you can manipulate the built-in instance to achieve your goal. It's particularly recommended to implement event listeners through the built-in instance.

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