sling-web-component-select

sling-web-component-select

Install

npm instal sling-web-component-select

Tag

  <sling-select></sling-select>

Dependencies

• sling-web-framework
• sling-web-helpers

Attributes and properties

Name	Type	Default Values	ReflectToAttribute	Observer	callSdk
disabled	Boolean	False	:heavy_check_mark:
name	String		:heavy_check_mark:
srcoptions	Array	[ ]
size	Number		:heavy_check_mark:
value	String		:heavy_check_mark:

Description

Name	Description
disabled	Disables the Select options, preventing the user from clicking and changing their style to dimmed.
name	Names the select tag to control.
srcoptions	Array of objects formed by the following properties: name that indicates the text that will be shown in the option and id that will be the value of the option and will be passed through an event to the form that uses the element. The tag will receive this array to mount the select options.
size	If the control is presented as a scroll listbox, this attribute represents the number of rows in the list box that should be visible at a given time. More info in Select MDN Docs.
value	Value of the selected tag in the current moment.

Events

• change

Description: The event is triggered when a change of the value of select, taking in the detail of the event the value of the selected option.

Examples

srcoptions Array

const srcoptions = 
[
    {
      name: 'Option1',
      id: 1,
    },
    {
      name: 'Option2',
      id: 2,
    },
    {
      name: 'Option3',
      id: 3,
    }
]

All component examples can be emulated using the npm start sling-web-component-select command.

Use

<sling-select></sling-select>

<sling-select disabled></sling-select>