Mob
v0.0.10
The Mob components are the headless components of Mishka Chelekom rebuilt as native iOS and Android widgets for Mob, the framework that runs Elixir on the phone. Jetpack Compose and SwiftUI draw them, so there is no HTML, CSS or JavaScript. Generate one with mix mishka.ui.gen.mob, or all of them with mix mishka.ui.gen.mob.components. Each one lands in lib/<app>/components/ and registers its tag, so you write <Chip label="Elixir" /> in your screen's ~MOB markup. Your screen keeps the state, and taps and changes arrive in its handle_info/2.
- Accordion MobStateless Build a Mob Accordion for iOS and Android: stack disclosure items, open one or many panels, lock one open, and handle taps in handle_info/2.
- Action icon MobStateless Add a compact icon-only button with a finger-sized tap target to an iOS and Android app with the Mob Action Icon component.
- Alert dialog MobStateless Ask for a confirmation on iOS and Android with the Mob Alert Dialog component, a modal that blocks the screen until the user picks an action.
- Alpha slider MobStateless Let people pick an opacity from 0 to 100 percent on iOS and Android with the Mob alpha slider, a track drawn over a real transparency checkerboard.
- Anchor MobStateless Add tappable text links to iOS and Android screens with the Mob Anchor component, and open the URL or push another screen from your own handler.
- Angle slider MobStateless Let people choose an angle from 0 to 360 degrees on iOS and Android with the Mob angle slider, a circular dial that you drag around its ring.
- Autocomplete MobStateless Use the Mob Autocomplete component on iOS and Android to suggest completions as you type, with prefix or contains matching and free text values.
- Avatar MobStateless Show a user photo with an initials fallback on iOS and Android with the Mob Avatar component. Choose a shape, size and colors, then generate it with Mix.
- Burger MobStateless Add a three-bar navigation button that folds into a close icon when open to an iOS and Android app with the Mob Burger component.
- Checkbox MobStateless Add the Mob Checkbox to your iOS and Android app with checked, unchecked and indeterminate states, a disabled state, and custom color and size.
- Checkbox group MobStateless Build a Mob Checkbox group for iOS and Android with a select all parent, rows from data, disabled rows, and ready-made selection helpers.
- Chip MobStateless Add selectable filter chips to an iOS and Android app with the Mob Chip component. Build multi-select and single-select sets and generate it with Mix.
- Close button MobStateless Add a circular close button that dismisses a dialog, drawer, toast or card in an iOS and Android app with the Mob Close Button component.
- Code MobStateless Show inline code and horizontally scrolling code blocks in iOS and Android apps with the Mob Code component, in a monospace font and custom colors.
- Collapsible MobStateless Show and hide one region with the Mob Collapsible on iOS and Android. Keep the open state in your screen and handle taps in handle_info/2.
- Color input MobStateless Let people type or pick a color on iOS and Android with the Mob color input, a hex field with a swatch and a picker panel that opens beneath it.
- Color picker MobStateless Let people choose a color on iOS and Android with the Mob color picker, a saturation and value field over a hue slider that you drag.
- Color swatch MobStateless Show and select colors on iOS and Android with the Mob color swatch, a block of one color with a transparency checkerboard and a tap event.
- Combobox MobStateless Build a Mob Combobox for iOS and Android that filters options as you type, with chips, groups, a create row and case and accent insensitive matching.
- Context menu MobStateless Open the actions for a row or object on iOS and Android with a long press using the Mob Context Menu, with an optional heading naming the object.
- Dialog MobStateless Show a centered modal over a dimmed backdrop on iOS and Android with the Mob Dialog component, and handle its close events in your Elixir screen.
- Drawer MobStateless Add an edge-anchored drawer or bottom sheet to your iOS and Android app with the Mob Drawer component, with drag handle, snap points and edge swipe.
- Empty state MobStateless Show an indicator, title, text and action buttons on iOS and Android with the Mob Empty state component when a list has nothing in it.
- Field MobStateless Wrap a control in a Mob Field to add a label, a hint and validation errors to your iOS and Android forms with Jetpack Compose and SwiftUI.
- Fieldset MobStateless Group related controls under a legend with the Mob Fieldset component, and style the group as a panel in your iOS and Android app.
- Floating indicator MobStateless Highlight one active target among several on iOS and Android with the Mob Floating Indicator, in a horizontal row or a vertical stack.
- Floating window MobStateless Build a window that floats over a stage on iOS and Android and moves when users drag its title bar or tap arrows with the Mob Floating Window.
- Highlight MobStateless Mark matching text in search results on iOS and Android with the Mob Highlight component. Use several queries, case sensitivity and line wrapping.
- Hue slider MobStateless Let people pick a hue from 0 to 360 degrees on iOS and Android with the Mob hue slider, a rainbow track drawn on a canvas that you drag.
- JSON input MobStateless Add a multiline JSON field to an iOS and Android app with the Mob JSON Input, which validates the text and shows the parser message under the field.
- Loading overlay MobStateless Cover a busy region of an iOS or Android screen with the Mob Loading overlay component, show a progress bar and label, and block taps while work runs.
- Mark MobStateless Highlight a word in iOS and Android apps with the Mob Mark component, the native version of the HTML mark element, with a fill color you choose.
- Marquee MobStateless Show repeated content in a horizontal rail you can flick on iOS and Android with the Mob Marquee component, built on the native Scroll Area.
- Mask input MobStateless Format phone numbers, dates and codes as users type on iOS and Android with the Mob Mask input, using a pattern of digits, letters and literals.
- Menu MobStateless Show a native list of actions on iOS and Android with the Mob Menu, including items, checkboxes, radio rows, labels, separators and inline submenus.
- Menubar MobStateless Show a bar of menus on iOS and Android with the Mob Menubar component, where opening a menu closes the one before it and your screen owns which is open.
- Meter MobStateless Show a measurement inside a known range in your iOS and Android app with Mob Meter, a native gauge with a label, readout, range and color.
- Nav link MobStateless Build sidebar rows and collapsible link groups for iOS and Android with the Mob Nav Link component, and keep the group state in your screen.
- Navigation menu MobStateless Build site navigation for iOS and Android with the Mob Navigation Menu component, with plain links and triggers that share one panel area in your screen.
- Number field MobStateless Add a numeric input with minus and plus steppers to your iOS and Android app with the Mob Number field. Set a range, a step and a format.
- Number formatter MobStateless Format numbers with grouping, decimals, prefix and suffix on iOS and Android with the Mob Number Formatter component or its format function.
- OTP field MobStateless Build a segmented one-time-code input for iOS and Android with the Mob OTP field. Set the length, mask digits, group slots and sanitize pasted codes.
- Overflow list MobStateless Fit items on one row on iOS and Android with the Mob Overflow List component. Fold the rest into a +N counter you can tap, and generate it with Mix.
- Pill MobStateless Show removable tags and tokens on iOS and Android with the Mob Pill component. Make pills tappable, colored or disabled, and generate it with Mix.
- Pills input MobStateless Add a Mob Pills Input to an iOS and Android screen: a bordered control with pills you supply beside a text field, ready to pair with a suggestion list.
- Popover MobStateless Toggle a panel of content beside a trigger on iOS and Android with the Mob Popover component, opened by a tap or long press that your screen handles.
- Preview card MobStateless Reveal a card of detail when a user holds a name on iOS and Android with the Mob Preview Card, with side, align, arrow and avatar options.
- Progress MobStateless Show task progress in your iOS and Android app with Mob Progress, a native bar that can be determinate or indeterminate, with a label, range and color.
- Radio MobStateless Add the Mob Radio to your iOS and Android app. Mark one option as selected, handle taps with a tagged event, and set color, size and disabled state.
- Radio group MobStateless Build a Mob Radio group for iOS and Android with a labelled set of options, horizontal layout, disabled options, and options built from a list.
- Rolling number MobStateless Count a number up or down on iOS and Android with the Mob Rolling Number component. Group thousands, set size and color, and generate it with Mix.
- Scroll area MobStateless Build a bounded vertical or horizontal scrolling region on iOS and Android with the Mob Scroll Area, which wraps the native Scroll node.
- Scroller MobStateless Add a horizontal rail with previous and next arrows to an iOS and Android screen with the Mob Scroller, and move it from the screen with nudge.
- Segmented control MobStateless Add a Mob Segmented control to your iOS and Android app. Keep one segment always selected, build segments from data, and style it with props.
- Select MobStateless Add the Mob Select component to an iOS and Android app: a trigger showing the current choice and a list for single, multiple and grouped picks.
- Semi circle progress MobStateless Draw a half circle gauge in your iOS and Android app with Mob Semi Circle Progress, with a custom range, readout, caption, size and color.
- Separator MobStateless Divide content in your iOS and Android app with Mob Separator, a horizontal or vertical rule with an optional label, color and thickness.
- Skeleton MobStateless Show grey text, block and circle placeholders on iOS and Android with the Mob Skeleton component while data loads, then swap in the real content.
- Slider MobStateless Add a draggable slider to an iOS and Android app with the Mob Slider component. Use steps, two-thumb ranges and vertical tracks, and generate it with Mix.
- Splitter MobStateless Divide an iOS and Android screen into two panes with a draggable divider using the Mob Splitter, with horizontal or vertical layout and min and max bounds.
- Spoiler MobStateless Hide long content behind a Show more control with the Mob Spoiler on iOS and Android. Add a preview, set custom labels and handle the toggle tap.
- Switch MobStateless Add the Mob Switch to your iOS and Android app with a label, custom colors, a disabled state, and an optional drawn render mode.
- Tabs MobStateless Show a tab strip above one visible panel on iOS and Android with the Mob Tabs component, with a strip that scrolls sideways when the tabs overflow.
- Tags input MobStateless Let users add tags with the return key and remove them from a token on iOS and Android with the Mob Tags input and its draft text field.
- Theme icon MobStateless Wrap one icon in a painted container on iOS and Android with the Mob Theme Icon: seven variants, five sizes, radius, gradient and long press labels.
- Toast MobStateless Stack short messages at the top or bottom of an iOS or Android screen with the Mob Toast component, then dismiss, cap or expire them from your screen.
- Toggle MobStateless Add a toggle button that stays pressed, like bold or italic in a formatting bar, to an iOS and Android app with the Mob Toggle component.
- Toggle group MobStateless Group toggle buttons into a single or multiple selection row or column for iOS and Android with the Mob Toggle Group component.
- Toolbar MobStateless Build a toolbar of buttons, links, inputs and separators for iOS and Android with the Mob Toolbar component, with scroll or collapse overflow.
- Tooltip MobStateless Reveal a short hint about a control with a long press on iOS and Android using the Mob Tooltip component, with side, align and arrow options.
- Tree MobStateless Show expandable, selectable and checkable hierarchies on iOS and Android with the Mob Tree component, with range selection and children loaded on demand.
- Tree select MobStateless Show a Mob Tree Select on iOS and Android: a trigger with the current selection and a tree panel beneath it, plus placeholder and disabled states.
- Visually hidden MobStateless Learn how the Mob Visually Hidden component behaves on iOS and Android: it renders nothing, and announce? reports that hidden text is not read aloud.