Custom elements Redirect 3

X-tags are custom HTML elements that give you a collection of building blocks 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.

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.

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.

See also

Document Tags and Contributors

 Last updated by: chrisdavidmills,