Gaia/Design/BuildingBlocks: Difference between revisions

Jump to navigation Jump to search
Line 334: Line 334:
==Scrolling==
==Scrolling==
 
 
* '''Used for:'''
  '''Usage'''
** Vertically slides text, images and/or video across the device's display.
* Vertically slides text, images and/or video across the device's display.




* '''Characteristics:'''
  '''Characteristics'''
** There're two types of scrolling components:
* There're two types of scrolling components:
*** Scrollbar: It's automatically displayed on the right-hand side of the screen when the user starts scrolling through content. It should be always used within the scrollable content area and should never be painted over other components like headers or tab bars.
** Scrollbar: It's automatically displayed on the right-hand side of the screen when the user starts scrolling through content. It should be always used within the scrollable content area and should never be painted over other components like headers or tab bars.
*** Index scrolling: It's always displayed on the right-hand side of the screen and it's always visible, no matter the user is scrolling through content or not. Is always used for alphabetically ordered lists, like contacts or music. If the user starts scrolling directly over the component the system will switch to a "fast scrolling mode", making it possible to go faster to the selected letter in the alphabet.
** Index scrolling: It's always displayed on the right-hand side of the screen and it's always visible, no matter the user is scrolling through content or not. Is always used for alphabetically ordered lists, like contacts or music. If the user starts scrolling directly over the component the system will switch to a "fast scrolling mode", making it possible to go faster to the selected letter in the alphabet.




----
  '''Downloads'''
 
* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/scrolling/index.html Link to CSS in Github]  
 
* [https://mozilla.box.com/shared/static/nhh1ntgfzuethsqadt11.zip Source PSD (.zip)]
* '''Downloads:'''
** [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/scrolling/index.html Link to CSS in Github]  
** [https://mozilla.box.com/shared/static/nhh1ntgfzuethsqadt11.zip Source PSD (.zip)]




478

edits

Navigation menu