To be able to create a user-friendly property panel, the full arsenal of LUI (Leonardo UI) icons is available to be implemented, such as arrays, buttons, checkboxes, drop-down lists, sliders, switch, button groups, and much more, which makes the setting of properties a straightforward thing.

In detail, the following components are available for use natively:

• Button
• Button group
• Checkbox
• Color-picker
• Drop-down list
• Input box/textbox
• Link
• Media
• Radio button
• Range slider
• Slider
• Switch
• Text
• Text area

We won't go too much into detail of each one of them, as these are described best on the official Qlik Sense site, but components can be grouped into sections and headers in the properties panel. Each of them exposes different configuration options to manipulate their behavior.

Taking the drop-down list, for example, it would look as follows, as defined in the property panel:

MasteringQSdrop-down: { 
    type: "string", 
    component: "drop-down", 
    label: "Text Alignment", 
    ref: "drop-downproperty", 
    options: [{               
        value: "v",               
        label: "Vertical"             
    }, {               
        value: "h",               
        label: "Horizontal"             
    }],             
    defaultValue: "v"           
    }, 
}

Here is the result of the preceding code example: