478
edits
Gaia/Design/BuildingBlocks: Difference between revisions
Jump to navigation
Jump to search
→Value Selectors
| Line 471: | Line 471: | ||
== Value Selectors== | == Value Selectors== | ||
''' | '''Usage''' | ||
* Provides a way for the user to select one of more values, usually from a Form interface. | |||
* Provides a way for the user to select one of more values, usually from a Form interface. | |||
* Most commonly associated with forms (eg: Setting up a Calendar event). | * Most commonly associated with forms (eg: Setting up a Calendar event). | ||
* Value selector is the default component that should use to display a list of items. Alternatively It would be also possible to use a regular list with radio buttons, but this option is only recommended for lists with 3 or less elements. | * Value selector is the default component that should use to display a list of items. Alternatively It would be also possible to use a regular list with radio buttons, but this option is only recommended for lists with 3 or less elements. | ||
'''Characteristics:''' | '''Characteristics:''' | ||
* There're two categories of value selectors depending on the kind of information requested: | * There're two categories of value selectors depending on the kind of information requested: | ||
** Date + Time: | ** Date + Time: | ||
| Line 489: | Line 488: | ||
Important: You should always use the correct list button to trigger a value selector. Basically it consists of a standard list button with a gray arrow on the bottom right corner. The label used in the button should not be generic, but the currently selected option. When the user clicks the button and selects a new item in the value selector, the label used in the button will change to reflect the new selected option. | * '''Important:''' You should always use the correct list button to trigger a value selector. Basically it consists of a standard list button with a gray arrow on the bottom right corner. The label used in the button should not be generic, but the currently selected option. When the user clicks the button and selects a new item in the value selector, the label used in the button will change to reflect the new selected option. | ||
'''Downloads''' | |||
* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/date_picker.css Link to "Date Picker" CSS in Github] | * [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/date_picker.css Link to "Date Picker" CSS in Github] | ||
* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/time_picker.css Link to "Time Picker" CSS in Github] | * [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/time_picker.css Link to "Time Picker" CSS in Github] | ||
* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/value_selector.css Link to "Single/Multiple" CSS in Github] | * [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/value_selector.css Link to "Single/Multiple" CSS in Github] | ||
* [https://www.dropbox.com/s/grlj7tqu3f2g3o3/OWD_Value_Selectors_Compo.psd Link to source PSD in Dropbox] | * [https://www.dropbox.com/s/grlj7tqu3f2g3o3/OWD_Value_Selectors_Compo.psd Link to source PSD in Dropbox] | ||
{| | {| | ||