Mobile Widgets

Complete reference for all 28 mobile widgets

Mobile Widgets Reference

Mobile widgets are optimized for touch devices with responsive layouts and gesture support. All 28 mobile widgets are prefixed with "M" and designed specifically for iOS and Android applications. This reference documents all mobile widgets with their properties, events, methods, and usage examples.

Container Widgets

MView

Mobile view container - the primary container for mobile screens.

Properties

Property	Type	Description
`scrollable`	Boolean	Enable scrolling
`pullToRefresh`	Boolean	Pull-to-refresh gesture
`header`	Object	View header configuration
`footer`	Object	View footer configuration

Events

Event	Description
`ViewLoad`	View loaded
`PullToRefresh`	Pull to refresh triggered
`OrientationAltered`	Device orientation changed

Methods

Method	Description	Returns
`addChild(widget)`	Add child widget to view	`void`
`removeChild(widget)`	Remove child widget	`void`
`enablePullToRefresh(enabled)`	Enable/disable pull to refresh	`void`
`scrollTo(position)`	Scroll to position	`void`

MDialog

Mobile modal dialog for alerts, confirmations, and forms.

Properties

Property	Type	Description
`title`	String	Dialog title
`fullscreen`	Boolean	Full screen mode
`dismissible`	Boolean	Tap outside to close

Methods

Method	Description	Returns
`show()`	Show modal dialog	`void`
`hide()`	Hide modal dialog	`void`
`setFullscreen(fullscreen)`	Set fullscreen mode	`void`

MFixedContainer

Fixed position container for headers, footers, or floating elements.

Properties

Property	Type	Description
`position`	String	"top" or "bottom"
`height`	Integer	Container height

MTabBar

Bottom tab navigation - standard mobile navigation pattern.

Properties

Property	Type	Description
`tabs`	Tab	Tab definitions
`activeTab`	Integer	Active tab index
`showLabels`	Boolean	Show tab labels

Events

Event	Description
`TabChange`	Active tab changed

Methods

Method	Description	Returns
`addTab(tab)`	Add tab to bar	`void`
`selectTab(index)`	Select tab by index	`void`
`getActiveTab()`	Get active tab index	`Number`
`setShowLabels(show)`	Show/hide tab labels	`void`

Example

{
  widgetType: "MTabBar",
  tabs: [
    { label: "Home", icon: "home", view: "HomeView" },
    { label: "Search", icon: "search", view: "SearchView" },
    { label: "Profile", icon: "user", view: "ProfileView" }
  ],
  showLabels: true
}

MList

Scrollable list container for displaying collections of items.

Properties

Property	Type	Description
`items`	ListItem	List items
`grouped`	Boolean	Group items by category
`searchable`	Boolean	Enable search filtering

Methods

Method	Description	Returns
`addItem(item)`	Add list item	`void`
`removeItem(index)`	Remove list item	`void`
`clear()`	Clear all items	`void`
`enableSearch(enabled)`	Enable/disable search	`void`
`scrollToItem(index)`	Scroll to specific item	`void`

MListItem

Individual list item with title, subtitle, thumbnail, and navigation.

Properties

Property	Type	Description
`title`	String	Item title
`subtitle`	String	Item subtitle
`thumbnail`	String	Thumbnail image URL
`arrow`	Boolean	Show navigation arrow indicator

Events

Event	Description
`Click`	Item clicked
`SwipeLeft`	Swiped left (for delete actions)
`SwipeRight`	Swiped right (for actions)

Methods

Method	Description	Returns
`setTitle(title)`	Set item title	`void`
`setSubtitle(subtitle)`	Set item subtitle	`void`
`setThumbnail(url)`	Set thumbnail image	`void`
`setArrow(show)`	Show/hide arrow indicator	`void`

Example

{
  widgetType: "MListItem",
  title: "John Doe",
  subtitle: "john.doe@example.com",
  thumbnail: "/images/users/john.jpg",
  arrow: true
}

Input Widgets

MButton

Touch-optimized button with haptic feedback support.

Properties

Property	Type	Description
`label`	String	Button text
`icon`	String	Button icon
`block`	Boolean	Full width button
`raised`	Boolean	Raised appearance with shadow

Events

Event	Description
`Click`	Button clicked

Methods

Method	Description	Returns
`setLabel(label)`	Set button label	`void`
`getLabel()`	Get button label	`String`
`setIcon(icon)`	Set button icon	`void`
`setBlock(block)`	Set full width style	`void`
`setRaised(raised)`	Set raised appearance	`void`
`pulse()`	Trigger pulse animation	`void`
`enable()`	Enable button	`void`
`disable()`	Disable button	`void`

Example

{
  widgetType: "MButton",
  label: "Submit",
  icon: "check",
  block: true,
  raised: true
}

MTextField

Mobile text input with keyboard type support and floating labels.

Properties

Property	Type	Description
`inputType`	String	Keyboard type ("text", "email", "phone", "url")
`clearButton`	Boolean	Show clear button
`floatingLabel`	Boolean	Floating label style

Events

Event	Description
`Change`	Value changed
`Focus`	Field focused
`Blur`	Field blurred
`KeyPress`	Key pressed

Methods

Method	Description	Returns
`getValue()`	Get text input value	`String`
`setValue(value)`	Set text input value	`void`
`clear()`	Clear input value	`void`
`setInputType(type)`	Set keyboard input type	`void`
`showClearButton(show)`	Show/hide clear button	`void`
`setFloatingLabel(floating)`	Enable floating label style	`void`

Example

{
  widgetType: "MTextField",
  inputType: "email",
  placeholder: "Enter your email",
  floatingLabel: true,
  clearButton: true
}

MTextArea

Mobile multi-line text input with auto-grow support.

Properties

Property	Type	Description
`autoGrow`	Boolean	Auto-expand height as user types
`maxRows`	Integer	Maximum rows when auto-growing

Events

Event	Description
`Change`	Content changed
`Focus`	Field focused
`Blur`	Field blurred
`KeyPress`	Key pressed

Methods

Method	Description	Returns
`getValue()`	Get textarea content	`String`
`setValue(value)`	Set textarea content	`void`
`clear()`	Clear textarea content	`void`
`appendText(text)`	Append text to current content	`void`
`setAutoGrow(autoGrow)`	Enable auto height expansion	`void`
`setMaxRows(rows)`	Set maximum rows when auto-growing	`void`
`getLineCount()`	Get current number of lines	`Number`

MNumberField

Mobile numeric input with numeric keyboard.

Properties

Property	Type	Description
`keyboardType`	String	"numeric" or "decimal"
`buttons`	Boolean	Show increment/decrement buttons

Events

Event	Description
`Change`	Value changed
`Focus`	Field focused
`Blur`	Field blurred
`KeyPress`	Key pressed

Methods

Method	Description	Returns
`getValue()`	Get numeric value	`Number`
`setValue(value)`	Set numeric value	`void`
`increment()`	Increment value by step amount	`void`
`decrement()`	Decrement value by step amount	`void`
`setKeyboardType(type)`	Set mobile keyboard type	`void`
`showButtons(show)`	Show/hide increment/decrement buttons	`void`

MDateField

Mobile date picker using native device picker.

Properties

Property	Type	Description
`mode`	String	"date", "time", or "datetime"
`nativeInput`	Boolean	Use native device picker

Events

Event	Description
`Change`	Date changed
`Focus`	Field focused
`Blur`	Field blurred

Methods

Method	Description	Returns
`getValue()`	Get selected date value	`Date` or `String`
`setValue(value)`	Set date value	`void`
`setMode(mode)`	Set picker mode	`void`
`showPicker()`	Show native date picker	`void`
`setNativeInput(native)`	Use native picker interface	`void`
`getFormattedValue()`	Get formatted date string	`String`

Example

{
  widgetType: "MDateField",
  mode: "datetime",
  nativeInput: true
}

MSwitch

Toggle switch control - iOS/Android style toggle.

Properties

Property	Type	Description
`onLabel`	String	On state label
`offLabel`	String	Off state label
`color`	String	Switch color when on

Events

Event	Description
`Change`	Switch state changed

Methods

Method	Description	Returns
`getValue()`	Get switch state	`Boolean`
`setValue(value)`	Set switch state	`void`
`toggle()`	Toggle switch state	`void`
`setOnLabel(label)`	Set label for on state	`void`
`setOffLabel(label)`	Set label for off state	`void`
`setColor(color)`	Set switch color theme	`void`

Example

{
  widgetType: "MSwitch",
  onLabel: "Enabled",
  offLabel: "Disabled",
  color: "#3498db"
}

MCheckBox

Mobile checkbox with touch-friendly sizing.

Properties

Property	Type	Description
`label`	String	Checkbox label
`position`	String	Label position ("left" or "right")

Events

Event	Description
`Change`	Checkbox state changed

Methods

Method	Description	Returns
`getValue()`	Get checkbox state	`Boolean`
`setValue(value)`	Set checkbox state	`void`
`toggle()`	Toggle checkbox state	`void`
`setLabel(label)`	Set checkbox label	`void`
`setPosition(position)`	Set label position	`void`

MRange

Mobile range slider with optional dual handles.

Properties

Property	Type	Description
`min`	Number	Minimum value
`max`	Number	Maximum value
`dual`	Boolean	Dual handle mode for range selection

Events

Event	Description
`Change`	Value changed (on release)
`Slide`	Value changing (during drag)

Methods

Method	Description	Returns
`getValue()`	Get slider value(s)	`Number` or `Array` (dual mode)
`setValue(value)`	Set slider value(s)	`void`
`setMin(min)`	Set minimum value	`void`
`setMax(max)`	Set maximum value	`void`
`setDual(dual)`	Enable dual handle mode	`void`
`getHandlePosition(handle)`	Get handle position (0 or 1)	`Number`

Example

// Single value slider
{
  widgetType: "MRange",
  min: 0,
  max: 100,
  value: 50
}

// Dual handle range slider
{
  widgetType: "MRange",
  min: 0,
  max: 1000,
  dual: true,
  value: [200, 800]
}

Display Widgets

MCard

Content card container for displaying grouped information.

Properties

Property	Type	Description
`title`	String	Card title
`image`	String	Card header image URL
`actions`	Action	Card action buttons

Events

Event	Description
`Click`	Card clicked
`ActionClick`	Action button clicked

Methods

Method	Description	Returns
`setTitle(title)`	Set card title	`void`
`setImage(url)`	Set card image	`void`
`addAction(action)`	Add action button	`void`
`removeAction(index)`	Remove action button	`void`
`setContent(content)`	Set card content	`void`

Example

{
  widgetType: "MCard",
  title: "Product Name",
  image: "/images/product.jpg",
  actions: [
    { label: "Buy Now", handler: "handleBuy" },
    { label: "Details", handler: "showDetails" }
  ]
}

MHeading

Mobile heading text with semantic levels.

Properties

Property	Type	Description
`level`	Integer	Heading level (1-6)
`text`	String	Heading text

Methods

Method	Description	Returns
`getText()`	Get heading text	`String`
`setText(text)`	Set heading text	`void`
`setLevel(level)`	Set heading level (1-6)	`void`
`getLevel()`	Get current heading level	`Number`

MText

Mobile text display with truncation support.

Properties

Property	Type	Description
`text`	String	Display text
`truncate`	Boolean	Truncate long text with ellipsis

Methods

Method	Description	Returns
`getText()`	Get display text	`String`
`setText(text)`	Set display text	`void`
`setTruncate(truncate)`	Enable text truncation	`void`
`getFullText()`	Get full untruncated text	`String`

MIcon

Mobile icon display with badge support.

Properties

Property	Type	Description
`icon`	String	Icon name from icon library
`badge`	String	Badge text (e.g., notification count)

Methods

Method	Description	Returns
`getIcon()`	Get current icon name	`String`
`setIcon(icon)`	Set icon name	`void`
`getBadge()`	Get badge text	`String`
`setBadge(text)`	Set badge text	`void`
`clearBadge()`	Clear badge text	`void`

Example

{
  widgetType: "MIcon",
  icon: "bell",
  badge: "5"
}

MFab

Floating action button - primary action button that floats above content.

Properties

Property	Type	Description
`icon`	String	Button icon
`position`	String	Screen position ("bottom-right", "bottom-left", "top-right", "top-left")
`mini`	Boolean	Mini size variant

Events

Event	Description
`Click`	Button clicked

Methods

Method	Description	Returns
`getIcon()`	Get button icon	`String`
`setIcon(icon)`	Set button icon	`void`
`setPosition(position)`	Set screen position	`void`
`setMini(mini)`	Set mini size mode	`void`
`pulse()`	Trigger pulse animation	`void`
`click()`	Programmatically trigger click	`void`

Example

{
  widgetType: "MFab",
  icon: "plus",
  position: "bottom-right",
  mini: false
}

Data Binding in Mobile Widgets

Direct Binding

Bind a widget directly to a model attribute:

Widget: MTextField
Property: value
Binding: customer.name

Calculated Binding

Display computed values:

Widget: MText
Property: text
Binding: order.quantity * order.unit_price

Event Binding

Respond to user interactions:

Widget: MButton
Event: onClick
Action: Save record and navigate to list

The most common mobile navigation pattern:

MView
├── Content Area (scrollable)
│   └── Your content widgets
└── MTabBar (fixed at bottom)
    ├── Tab: Home
    ├── Tab: Search
    ├── Tab: Favorites
    └── Tab: Profile

List-Detail Pattern

Standard master-detail navigation:

MView: CustomerList
├── MList
│   └── MListItem (for each customer)
│       onClick: Navigate to CustomerDetail

MView: CustomerDetail
├── Back button in header
├── Customer information
└── Action buttons

For confirmations and quick forms:

MButton: "Delete"
onClick:
  MDialog.show({
    title: "Confirm Delete",
    content: "Are you sure?",
    actions: ["Cancel", "Delete"]
  })

Mobile-Specific Best Practices

Touch Targets

Minimum touch target size: 44x44 pixels
Adequate spacing between interactive elements
Use MButton with block: true for primary actions

Performance

Use virtual scrolling for long lists
Lazy load images in MList
Minimize view complexity

Gestures

Support pull-to-refresh for data updates
Use swipe gestures on MListItem for quick actions
Provide visual feedback for all interactions

Responsive Layouts

Design for portrait orientation first
Test on various screen sizes
Use flexible containers that adapt to screen width

Next Steps

Desktop Widgets - Complete desktop widget reference
Widget Reference Overview - Widget categories and common features
Mobile Development Guide - Mobile-specific patterns and best practices
User Interfaces Guide - UI architecture and patterns

Mobile Widgets

Mobile Widgets Reference

Container Widgets

MView

MDialog

MFixedContainer

Navigation Widgets

MTabBar

MList

MListItem

Input Widgets

MButton

MTextField

MTextArea

MNumberField

MDateField

MSwitch

MCheckBox

MRange

Display Widgets

MCard

MHeading

MText

MIcon

MFab

Data Binding in Mobile Widgets

Direct Binding

Calculated Binding

Event Binding

Mobile Navigation Patterns

Tab-Based Navigation

List-Detail Pattern

Mobile-Specific Best Practices

Touch Targets

Performance

Gestures

Responsive Layouts

Next Steps