X-tags are custom HTML elements that give you a collection of building blocks (components) for developing HTML5 apps. If you don't see the component you need, you can define your own x-tag and use it like any other native HTML tag. Listed below are ten x-tags and a description of what they are used for.
X-tags are based on Web Components technologies.
Alert popup
An alert popup dialog is a small window which demands user input related to the current activity. It disables all current activities and only disappears after the user confirms an action or dismisses the dialog.
Dropdown
A dropdown menu presents a list of options related to the current activity. It is opened when the user touches the dropdown icon. It can include text, image or both.
List
A list is a group of vertically arranged elements which can consists of text, icons, checkboxes, radio buttons, etc. A list often has a title and separators.
Date/time picker
A picker lets the user quickly choose time, date or other information such as a location from a predefined set of values. It also ensures the data is entered in the correct format.
Select list
A select list is a popup dialog that presents a list of options related to the current activity. It disables all current activities and only disappears after the user confirms an action or dismisses the dialog. A normal list allows the user to select one item, and a multi-select list allows multiple selections. It can include text, image or both.
Slide box
A slide box is a rotating slide display with previous/ next navigation that moves either horizontally or vertically, but not both.
Slider
A slider lets the user adjust and select a value from a predefined range by moving a handle. Changes are immediately noticeable so that the user can fine-tune the values accordingly (e.g. brightness). When it is easier for the user to enter a value directly, use a text box.
Tab box
Tabs are usually used in a group to switch between different display panes.
Toast
A toast is a small popup that either provides notification of an event (new email) or immediate and non-intrusive feedback on the user's action (email saved). It contains minimal text, does not require user interaction and automatically disappears after a few seconds. It can include text, an image or both.
Toggle switch
A toggle switch allows the user to choose between two states. Changes are immediate and the user can switch back and forth.