Using Mobile and Reactive Patterns
Collaborate with us
Edit this page on GitHub
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
- 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 Item
- The Card Item widget allows you to list items with multiple content types, such as an image or icon, a title and description, and an action to the right.
- Card Sectioned
- Card Sectioned groups short pieces of information in sections and highlights them on the screen.
- Chat Message
- Chat Message displays conversation posts in notifications or chat screens.
- Flip Content
- Flip Content prioritizes information display, keeping the interface uncluttered.
- Floating Content
- Floating Content displays a panel that floats over content (like a map or an image), docked to a screen corner or direction.
- List Item Content
- List Item Content is used to layout content such as icons, text, and actions inside a list in a readable way.
- Section
- Section separates content into groups, easing visual organization.
- Section Group
- Use the Section Group UI Pattern to keep the context of the header while progressively viewing more content by scrolling.
- 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.
- Action Sheet
- Option menu, which slides from the bottom of the screen, triggered by a user action.
- 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.
- Dropdown Search
- The Dropdown Search UI Pattern offers a choice of available options that the user can search.
- Dropdown Tags
- The Dropdown Tags UI Pattern offers multiple choice options to the user when using a dropdown search.
- Floating Actions
- Floating Actions displays an action that floats in the bottom right corner of the screen.
- Horizontal Scroll
- The Horizontal Scroll displays a subset of a category, a finite amount of sections, slides, or content that's larger than the screen.
- 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.
- Notification
- The Notification UI Pattern is a contextual short message that provides important information to the user.
- Map
- Use the Map pattern to ad Google Map to your app.
- 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.
- Search
- Search allows the user to find pieces of content without the use of navigation.
- 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.
- Video
- Video allows you to embed a native video player.
- Bottom Bar Item
- The Bottom Bar Item provides access to a bottom navigation drawer
- Breadcrumbs
- Breadcrumbs present the location of the user within the hierarchy of applications.
- Pagination
- The Pagination UI Pattern helps users find a specific item on long listings.
- Section Index
- Section Index organizes the content of a screen, enabling quick navigation within the page.
- Submenu
- Submenu is used to create a menu contained within another menu.
- Tabs
- Displays large sets of information, which can be split into different areas, while always remaining a click away.
- Timeline Item
- Timeline Item indicates related events in chronological order.
- Wizard
- Wizard splits complex tasks and process into steps.
- 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.
- Progress Bar
- Progress Bar displays the progress of a task by incrementing values in a bar.
- Progress Circle
- Displays the current progress of a task using circular or semi-circular progress indicators.
- Progress Circle Fraction
- Display fraction values by incrementing values in a circular badge.
- 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
- 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.
- Mouse Events
- The Mouse Events UI Pattern enables click events on a specific widget or pattern.
- 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.