Mochi Designs

Harlan edited this page Oct 4, 2017 · 27 revisions

Components - Master PNG

Component Description Red lines Comps Sample or Jira
Button A control that invokes an action PDF 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 Off-PNG On-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
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
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
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
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
Badge Number count that appears on top of an icon PDF PNG Badge sample
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
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.