-
Notifications
You must be signed in to change notification settings - Fork 2
4. User Interface
Rokwire plugin contains some UI definitions that could be shared and reused across different applications. It contains mostly UI control widget and a few panel or popup widgets.
ExpandableText widget displays multiline text with a limited number of lines. If the text content is larger than the number of lines, a "read more" text and icon are displayed underneath the text. When selected the entire text is displayed without the number of lines limit.
FilterListItem widget displays a list item of filter dropdown. It displays text and an icon. The text style and icon could vary depending on the selection state.
FilterSelector widget displays a filter dropdown. It displays text and an icon that could vary on active and expanded state change.
FlexContent widget displays a message. It contains title, message and list of buttons and close button. It allows initialization of its content from JSON. The supported button actions are navigation to web pages. Used for broadcasting emergency messages displayed as popup on application startup or a home panel widget on top.
HeaderBar widget wraps AppBar. Its purpose is to add semantics sort key that is not available in standard AppBar.
SliverHeaderBar widget wraps SliverAppBar.
SliverToutHeaderBar widget wraps SliverAppBar adding a triangle slant header effect in the flexible content area.
RibbonButton widget creates a button that expands the entire width and typically displays text on left and icon on right. Supports progress indicator.
ToggleRibbonButton widget extends RibbonButton widget and defines normal and selected state where the icon could vary. Used as checkbox control.
RoundedButton widget creates a button with rounded corners. The button content is a title and optional icons on left or right. Supports progress indicator, optional double border and shadow.
By default button width expands the entire available width. This behavior could be changed by setting contentWeight value between 0 and 1. In this case the button width expands the corresponding proportion on the available width and contentAlignment determines the position of the button across the horizontal space. Setting contentWeight to 0 should wrap the button width to its content but this should be avoided as large text as length or font size could overflow the available width.
RoundedTab widget creates a button with text, border and background color that could vary depending on its selected state. Used for tab-like control for switching content.
SectionSlantHeader widget displays a list with heading with different background color, title, optional subtitle and icon, and a triangle slant header effect behind the list.
SectionSlantHeader widget displays heading with different background color, title, optional subtitle and icon.
ImageSlantHeader widget displays heading with a tout image and a triangle slant header effect behind the list.
VerticalTitleValueSection widget displays title and value aligned vertically with a highlighted line on right.
SwipeDetector widget handles gestures for swipes in four directions - left, tight, up and down. Used for alternative browsing in a navigation stack.
TabBar widget is an abstraction for TabBar control whose content is loaded from Flex UI service. It cannot function as it is because it relies on the inheritor class to provide particular tabs basing on Flex UI content codes.
TabWidget is used for a single tab button for TabBar. It contains title and icon and supports normal and selected states.
TabCloseWidget is a special type of tab button that displays a close button. Used when the displayed tab is presented and modal popup.
TileButton widget is a square-like button with icon and title aligned vertically. Typically used in a 2-column set of buttons.
TileWideButton widget is a rectangular-like button with icon and title aligned vertically. Typically used when a TileButton should spread over two columns when displaying an odd number of buttons in a 2-column set of buttons.
TileToggleButton widget is similar to TileButton but also has a selection mark and supports two states - normal and selected. In normal state it looks the same as TileButton, in selected state the selection mark is visible.
TrianglePainter is a custom painter that paints a triangle. Used in slant headers.
WebPanel widget is a standard rokwire panel with header bar that displays embedded web content loaded from URL.
ModalImagePanel widget is a panel that looks like a modally presented but is pushed in the navigation stack. It embeds a web image loaded from an URL.
PopupMessage widget is a popup displayed as a dialog. It contains a title, message and a button. Used to present asynchronous messages.