Mochi Designs

Ben Combee edited this page Mar 12, 2014 · 26 revisions
Clone this wiki locally

Components - Master PNG

Component Description Red lines Comps Sample or Jira
Controls
Button A control that invokes an action [PDF](http://enyojs.com/mochi/Mochi button redlines.pdf) [PNG](http://enyojs.com/mochi/Mochi button comps.png) Button sample
Icon Button Graphical control that invokes an action Icon button sample
Toggle button A control that looks like a switch with labels for two states [PDF](http://enyojs.com/mochi/Mochi toggle button redlines.pdf) [Off-PNG](http://enyojs.com/mochi/Mochi toggle off comps.png) [On-PNG](http://enyojs.com/mochi/Mochi toggle on comps.png) Toggle button sample
Checkbox A box that shows or hides a checkmark when selected PDF Off-PNG On-PNG Checkbox sample
Radio button A method for selecting one value from a set; Selecting one option releases the previous selection PDF PNG Radio button sample
View selector A group of related buttons that act on content within a scene; Selecting one button releases the previous selection PDF PNG View selector sample
Tabs A selection method for navigating between multiple panels/screens PDF1 PDF2 PNG ENYO-3746
Slider A control that presents a range of selection options in the form of a horizontal slider and control knob PDF PNG Slider sample
Date, Time, Number Picker A method for selecting a value such as integers, dates, or time. PDF PNG ENYO-804
Picker A method for selecting between a discreet set of values. Selection state is saved. PNG ENYO-861
Menu A method for selecting between a discreet set of values. Selection state is not saved. PNG ENYO-860
Addressing Widget A method for selecting contacts PDF PNG ENYO-1608
Image Edit A method for cropping or resizing an image PDF ENYO-3747
Inputs
Input A text box PDF PNG Input sample
Rich text An input control supporting rich text entry (see Input) PDF Input sample
Text area A multi-line region for input PDF Input sample
Search field Input field that accepts text for filtering or searching PDF1 PDF2 Input sample
Containers
Header Title area for a scene; may contain controls. PDF PNG Header sample
Footer Footer for a scene; typically contains controls. PDF1 PDF2 PNG ENYO-1501
Toolbar A horizontal control containing UI controls PDF PNG ENYO-3748
Light Collapsible Divider A collapsible divider PDF1 PDF2 Open Closed ENYO-1439
Heavy Collapsible Divider A collapsible drawer (aka accordion) PDF Open Closed ENYO-1052
Navigable Divider Pinned dividers that auto-scroll content when tapped PDF PNG ENYO-1577
Groupbox A list container PNG ENYO-1051
Contextual pop-up A container that displays content over other content; Appears near the point of initiation PDF1 PDF2 Contextual popup sample
Shade pop-up A container that slides down from the top of the screen. Appears over other content. PDF1 PDF2 ENYO-3749
Tool tip A method for presenting contextual information on mouse hover ENYO-862
Lists
List A list of items, includes behavior for: scrolling, reordering, multiselect, filtering, pull-down (eg to refresh), jumping (alpha or other category), lazy loading, with dividers, individual list items (standard, swipe-able, draggable, editable, expandable) PDF1 PDF2 PDF3 ENYO-1149
Horizontal List Horizontal list; includes carousels. PDF1 PDF2 ENYO-1578
Divider A method for dividing a list; Dividers can be A-Z or labeled. PDF PNG ENYO-1435
Scroll fade A visual element within a list that indicates scrollability PDF PNG ENYO-1738
Scroll indicator Visual affordance indicating position within a list or grid (combine with scroll bar?) ENYO-3750
Scrollbar A method for scrolling a list PDF PNG ENYO-1579
Selected List Item Selected state for an List Item PDF ENYO-1739
Progress
Spinner An indicator for activity state. Two sizes: large, small PDF QuickTime Spinner sample
Activity button A button containing a small spinner ENYO-1414
Progress bar A control that shows the current progress of a process in a horizontal bar PNG Progress bar sample
Progress button A control that shows the progress of a process within a button. The button provides controls for pausing and resuming the process PDF PNG ENYO-816
Progress bar item A progress indicator that appears as a list item PDF PNG ENYO-815
Slider A progress slider (e.g. as used in volume controls) PDF PNG Slider sample
Dual progress slider A dual progress slider (e.g. in YouTube, display what's currently playing and what's buffering) PDF PNG ENYO-1067
Graphics
Badge Number count that appears on top of an icon PDF PNG Badge sample
Layout
Panel Common application layouts PDF1 PDF2 PNG Panels sample ENYO-1605 ENYO-1437
Grid Visual reference grid for object placement within a scene ENYO-1324