-
Notifications
You must be signed in to change notification settings - Fork 56
Mochi Designs
Harlan edited this page Oct 4, 2017
·
27 revisions
Components - Master PNG
| Component | Description | Red lines | Comps | Sample or Jira |
|---|---|---|---|---|
| Controls | ||||
| Button | A control that invokes an action | 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 | Off-PNG On-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 | 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 | 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 | PNG | 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 | PDF1 PDF2 | Input sample | |
| Containers | ||||
| Header | Title area for a scene; may contain controls. | PNG | Header sample | |
| Footer | Footer for a scene; typically contains controls. | PDF1 PDF2 | PNG | ENYO-1501 |
| Toolbar | A horizontal control containing UI controls | PNG | ENYO-3748 | |
| Light Collapsible Divider | A collapsible divider | PDF1 PDF2 | Open Closed | ENYO-1439 |
| Heavy Collapsible Divider | A collapsible drawer (aka accordion) | Open Closed | ENYO-1052 | |
| Navigable Divider | Pinned dividers that auto-scroll content when tapped | 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. | PNG | ENYO-1435 | |
| Scroll fade | A visual element within a list that indicates scrollability | 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 | PNG | ENYO-1579 | |
| Selected List Item | Selected state for an List Item | ENYO-1739 | ||
| Progress | ||||
| Spinner | An indicator for activity state. Two sizes: large, small | 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 | PNG | ENYO-816 | |
| Progress bar item | A progress indicator that appears as a list item | PNG | ENYO-815 | |
| Slider | A progress slider (e.g. as used in volume controls) | PNG | Slider sample | |
| Dual progress slider | A dual progress slider (e.g. in YouTube, display what's currently playing and what's buffering) | PNG | ENYO-1067 | |
| Graphics | ||||
| Badge | Number count that appears on top of an icon | 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 |
