-
Notifications
You must be signed in to change notification settings - Fork 56
Mochi Designs
Ben Combee edited this page Mar 11, 2014
·
27 revisions
Components
| Component | Description | Red lines | Comps | Sample or Jira |
|---|---|---|---|---|
| Controls | Master PNG | |||
| 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 | Off PNG On PNG | Checkbox sample | |
| Radio button | A method for selecting one value from a set; Selecting one option releases the previous selection | 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 | PNG | View selector sample | |
| Tabs | A selection method for navigating between multiple panels/screens | PNG | ENYO-3746 | |
| Slider | A control that presents a range of selection options in the form of a horizontal slider and control knob | PNG | Slider sample | |
| Date, Time, Number Picker | A method for selecting a value such as integers, dates, or time. | 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 | PNG | ENYO-1608 | |
| Image Edit | A method for cropping or resizing an image | ENYO-3747 | ||
| Inputs | ||||
| Input | A text box | Input sample | ||
| Rich text | An input control supporting rich text entry (see [Input) | Input sample | ||
| Text area | A multi-line region for input | Input sample | ||
| Search field | Input field that accepts text for filtering or searching | Input sample | ||
| Containers | ||||
| Header | Title area for a scene; may contain controls. | Header sample | ||
| Footer | Footer for a scene; typically contains controls. | ENYO-1501 | ||
| Toolbar | A horizontal control containing UI controls | ENYO-3748 | ||
| Light Collapsible Divider | A collapsible divider | ENYO-1439 | ||
| Heavy Collapsible Divider | A collapsible drawer (aka accordion) | ENYO-1052 | ||
| Navigable Divider | Pinned dividers that auto-scroll content when tapped | ENYO-1577 | ||
| Groupbox | A list container | ENYO-1051 | ||
| Contextual pop-up | A container that displays content over other content; Appears near the point of initiation | Contextual popup sample | ||
| Shade pop-up | A container that slides down from the top of the screen. Appears over other content. | 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) | ENYO-1149 | ||
| Horizontal List | Horizontal list; includes carousels. | ENYO-1578 | ||
| Divider | A method for dividing a list; Dividers can be A-Z or labeled. | ENYO-1435 | ||
| Scroll fade | A visual element within a list that indicates scrollability | 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 | ENYO-1579 | ||
| Selected List Item | Selected state for an List Item | ENYO-1739 | ||
| Progress | ||||
| Spinner | An indicator for activity state. Two sizes: large, small | 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 | 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 | ENYO-816 | ||
| Progress bar item | A progress indicator that appears as a list item | ENYO-815 | ||
| Slider | A progress slider (e.g. as used in volume controls) | Slider sample | ||
| Dual progress slider | A dual progress slider (e.g. in YouTube, display what's currently playing and what's buffering) | ENYO-1067 | ||
| Graphics | ||||
| Badge | Number count that appears on top of an icon | Badge sample | ||
| Layout | ||||
| Panel | Common application layouts | Panels sample ENYO-1605 ENYO-1437 | ||
| Grid | Visual reference grid for object placement within a scene | ENYO-1324 |
