Gaia/Design/BuildingBlocks: Difference between revisions

*'''Used for:'''

** Secondary Navigation

*** Filters can provide a second set of tabs, where tabs are already present.

** Data Filter

*** Filters can be used to enable the user to view a single set of data in a different lens.

*** eg: in Calendar, the filters they allow user to view time in different scales, from Day to Month).

*'''Characteristics:'''

** Horizontal sequence of buttons.  

** Only one button is Focused at a time.

** Best practice is to place filters within Toolbars, so they do not flow with the content.

** Left, Middle and Right buttons can be styled uniquely.

** Width: variable, depending on number of filters required within a single set (see Numbering). Should establish a maximum width, however.

** Numbering: minimum 2, maximum 5.

** Can be populated with icons or text, but not both. Because of the smaller height of a filter (versus a tab), text is the best practice.

 

 

 

 

* '''Downloads:'''

** [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/tabs/filters.html Link to CSS in Github]

** [https://mozilla.box.com/shared/static/pdnk89dr62m1u7kikvpn.zip Source PSD (.zip)]