X-Tags and custom elements

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.

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

Contributors to this page: markg, SteveLee, chrisdavidmills, kohei.yoshino, Sheppy, ednapiranha
Last updated by: markg,