Using Mobile and Reactive Patterns

Components and UI patterns specially designed to address common application use cases in mobile development.

OutSystems UI Mobile Framework offers you different patterns that you can drag and drop to the screen for a great mobile experience.

• Date Picker
• Carousel
• Columns
• Gallery
• Lightbox Image
• Master Detail
• Range Slider Interval
• Range Slider
• Split Screen
• Stacked Cards
• Swipe Events
• Tabs
• Touch Events

Articles in this Section

• Columns

  The Columns UI Pattern splits content into separate columns.

• Display on Device

  Display on Device improves the way information is displayed on different devices.

• Gallery

  Displays content (such as cards) in a specific set of columns, configurable per device type and orientation.

• Master Detail

  Displays a master list and the details for the currently selected item.

• Accordion

  Accordion expands vertically-stacked content by clicking on the header.

• Alert

  Alert gets the end user's attention and highlights important information, errors or warnings on the screen.

• Blank Slate

  Blank Slate informs end users when they start using the application, complete a task or when there is no data available for display.

• Card

  Card groups small pieces of information and highlights them on the screen.

• Card Background

  Card Background groups short pieces of information and highlights them on the screen while providing additional relevance by using a background image.

• Card Sectioned

  Card Sectioned groups short pieces of information in sections and highlights them on the screen.

• Flip Content

  Flip Content prioritizes information display, keeping the interface uncluttered.

• Section

  Section separates content into groups, easing visual organization.

• Tag

  Tag styles small texts in a colored tag format.

• Tooltip

  Tooltip dynamically displays simple informative content on end user interaction.

• User Avatar

  User Avatar displays user information in a circular badge.

• Animate

  Animate adds default animations to emphasize elements as they appear on the screen.

• Animated Label

  The Animated Label animates a label when there is user input.

• Carousel

  Displays multiple items in a horizontal slide.

• Date Picker

  Date Picker allows the end user to select a single or a range of dates using a calendar.

• Input with Icon

  Input with Icon allows the end user to input data with the help of a hint.

• Lightbox Image

  Displays an image thumbnail that can be clicked to open a fullscreen image.

• Range Slider

  Allows the user select a single value between two range values.

• Range Slider Interval

  the Range Slider Interval UI Pattern allows users select a single value between two range values.

• Sidebar

  Sidebar shows additional content on the side of the screen.

• Stacked Cards

  Adds swipeable cards that can be dragged in multiple directions triggering events, such as deny, approve, and archive.

• Breadcrumbs

  Breadcrumbs present the location of the user within the hierarchy of applications.

• Tabs

  Displays large sets of information, which can be split into different areas, while always remaining a click away.

• Badge

  Badge display numerical information as notification.

• Counter

  Counter shows the total number of occurrences of several values regarding a single topic.

• Icon Badge

  Icon Badge displays numerical information as notification.

• Align Center

  Align Center places content horizontally or vertically within a container.

• Button Loading

  Use the Button Loading pattern to call actions that don't run immediately.

• Center Content Loading

  Use the Center Content pattern to align the content to the center of its container.

• Margin Container

  Use the Margin Container and easily add symmetrical padding around a container.

• Swipe Events

  Swipe Events UI Pattern enables swiping on a specific widget.

• Touch Events

  The Touch Events UI Pattern enables touch events on a specific widget.

• Public Actions

• Split Screen

  Splits the screen vertically in two independent panels.