Widgets Library Mobile
Widgets are HTML/Bootstrap based UI components with rich interaction and designed for responsiveness. View the entire list of Widgets in this page.
note
Pages are designed as a composition of widgets. See Design Pages and learn about widgets workflow. For more information, see Widgets Overview.
Data Widgets
Form is a group of input elements put together to post data, typically updating data through a web service call
Playground
List is a widget that presents a list view of data, which contains a template for designing each list item
Cards is a single unit of content or functionality, presented in a concise visual package, to easily update, maintain, and personalize content area.
Live Form is a group of input elements put together to submit data, typically resulting in creating or updating a database row
Container Widgets
Accordion is a stacked list of UI components, with only one component expanded or viewed at any point in time, and the rest collapsed
Container is an enclosing element that wraps the widgets placed within, mostly used for embedding partial pages
Grid Layout helps division of pages or content area into cells or grids based on the 12-column fluid grid system, which helps in proper placement of the widgets for responsive design.
Flex Layout is a layout that arranges its children in a single column or row, either vertically or horizontally.
Panel has designated sections such as header, body, and footer and can be used to group a set of widgets together.
Tabs are Multiple UI components placed in a single window, with only one active component and headings allowing navigation to other components
Tile is a form of UI components to group a set of widgets together and to apply a uniform style to the content
Wizard is a form of UI components to group a set of widgets together and to apply a uniform style to the content
Form Widgets
Currency is a special text widget to input the currency type data, with the display format based on the currency type.
Number allows input of a number. It works with the selected app Locale and displays the number localized format.
Slider is a widget control with a handle that can be moved right and left (horizontal slider) on a bar to select a value from within the range of allowed values.
Switch widget can help switching between 3 or more different options by pressing a single key.
Toggle is a widget that can help switching between two different options by pressing a single key.
Basic Widgets
Audio widget is to embed an audio player into the project.
Message is a widget to display success, info, loading, error or warning messages to the user.
Chart Widgets
Line chart displays information as a series of data points called "markers" connected by straight line segments.
Pie chart is a type of graph in which a circle is divided into sectors that each represent a proportion of the whole.
Bar chart presents grouped data with horizontal bars with lengths proportional to the values that they represent.
Donut is a type of graph in which a circle is divided into sectors that each represent a proportion of the whole, with an inner circle showing summary.
Navigation Widgets
Dropdown Menu is a pull-down menu interface used for defining navigation structure within the app or for external links.
Nav widget represents navigation link or anchor, typically used for building navigation for multi-page apps.
Popover is a container-type graphical control element that opens in its parent window and blocks any other interaction until selected.
Advanced Widgets
Carousel displays two or more items either images, text or any content, that transitions in a cyclic order.
Modal Dialog/Dialog Widgets
Alert Dialog is a special dialog that is displayed when the user needs to take an immediate action.
Confirm Dialog gives a special dialog box that is displayed which requires user’s consent to complete the action.
Design Dialog gives a small window that communicates information to the user and prompts them for a response. The content of the dialog is customizable.
