Difference between revisions of "Human Interface Guidelines/The Sugar Interface/Controls/Indicators"
Jump to navigation
Jump to search
States:
States:
States:
States:
States:
States:
| Line 1: | Line 1: | ||
<noinclude>{{Translations}}</noinclude> | <noinclude>{{Translations}}</noinclude> | ||
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Adjustment Controls|p_label=Adjustment Controls|c_link=The Sugar Interface/Controls/Indicators|c_label=Indicators|n_link=The Sugar Interface/Controls/Text Controls|n_label=Text Controls}}</noinclude> | <noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Adjustment Controls|p_label=Adjustment Controls|c_link=The Sugar Interface/Controls/Indicators|c_label=Indicators|n_link=The Sugar Interface/Controls/Text Controls|n_label=Text Controls}}</noinclude> | ||
| + | <div style="position: relative; padding-right: 15px;"> | ||
| + | <div style="position: absolute; right: 0px; width: 300px; height: 100%; background: #4b4b4b;"></div> | ||
=====Determinate Progress Bars===== | =====Determinate Progress Bars===== | ||
[[Image:example_progress_bar_determinate.png|right]] | [[Image:example_progress_bar_determinate.png|right]] | ||
| + | <div style="margin-right: 310px;"> | ||
'''Usage:''' | '''Usage:''' | ||
| Line 11: | Line 14: | ||
<br clear='all'> | <br clear='all'> | ||
| − | <noinclude>'''States:''' | + | </div><noinclude>'''States:''' |
<br clear='all'>[[Image:progress_bar_determinate.png|thumb|400px|left|Click to view detailed control specifications]] | <br clear='all'>[[Image:progress_bar_determinate.png|thumb|400px|left|Click to view detailed control specifications]] | ||
<br clear='all'> | <br clear='all'> | ||
| Line 18: | Line 21: | ||
=====Indeterminate Progress Bars===== | =====Indeterminate Progress Bars===== | ||
[[Image:example_progress_bar_indeterminate.png|right]] | [[Image:example_progress_bar_indeterminate.png|right]] | ||
| + | <div style="margin-right: 310px;"> | ||
'''Usage:''' | '''Usage:''' | ||
| Line 25: | Line 29: | ||
<br clear='all'> | <br clear='all'> | ||
| − | <noinclude>'''States:''' | + | </div><noinclude>'''States:''' |
<br clear='all'>[[Image:progress_bar_indeterminate.png|thumb|400px|left|Click to view detailed control specifications]] | <br clear='all'>[[Image:progress_bar_indeterminate.png|thumb|400px|left|Click to view detailed control specifications]] | ||
<br clear='all'> | <br clear='all'> | ||
| Line 32: | Line 36: | ||
=====Activity Spinners===== | =====Activity Spinners===== | ||
[[Image:example_activity_spinner.png|right]] | [[Image:example_activity_spinner.png|right]] | ||
| + | <div style="margin-right: 310px;"> | ||
'''Usage:''' | '''Usage:''' | ||
| Line 39: | Line 44: | ||
<br clear='all'> | <br clear='all'> | ||
| − | <noinclude>'''States:''' | + | </div><noinclude>'''States:''' |
<br clear='all'>[[Image:activity_spinner.png|thumb|300px|left|Click to view detailed control specifications]] | <br clear='all'>[[Image:activity_spinner.png|thumb|300px|left|Click to view detailed control specifications]] | ||
<br clear='all'> | <br clear='all'> | ||
| Line 46: | Line 51: | ||
=====Level Indicators===== | =====Level Indicators===== | ||
[[Image:example_indicator_level.png|right]] | [[Image:example_indicator_level.png|right]] | ||
| + | <div style="margin-right: 310px;"> | ||
'''Usage:''' | '''Usage:''' | ||
| Line 53: | Line 59: | ||
<br clear='all'> | <br clear='all'> | ||
| − | <noinclude>'''States:''' | + | </div><noinclude>'''States:''' |
<br clear='all'>[[Image:indicator_level.png|thumb|300px|left|Click to view detailed control specifications]] | <br clear='all'>[[Image:indicator_level.png|thumb|300px|left|Click to view detailed control specifications]] | ||
<br clear='all'> | <br clear='all'> | ||
| Line 60: | Line 66: | ||
=====Rating Indicators===== | =====Rating Indicators===== | ||
[[Image:example_indicator_rating.png|right]] | [[Image:example_indicator_rating.png|right]] | ||
| + | <div style="margin-right: 310px;"> | ||
'''Usage:''' | '''Usage:''' | ||
| Line 67: | Line 74: | ||
<br clear='all'> | <br clear='all'> | ||
| − | <noinclude>'''States:''' | + | </div><noinclude>'''States:''' |
<br clear='all'>[[Image:indicator_rating.png|thumb|300px|left|Click to view detailed control specifications]] | <br clear='all'>[[Image:indicator_rating.png|thumb|300px|left|Click to view detailed control specifications]] | ||
<br clear='all'> | <br clear='all'> | ||
| Line 74: | Line 81: | ||
=====Relevance Indicators===== | =====Relevance Indicators===== | ||
[[Image:example_indicator_relevance.png|right]] | [[Image:example_indicator_relevance.png|right]] | ||
| + | <div style="margin-right: 310px;"> | ||
'''Usage:''' | '''Usage:''' | ||
| Line 81: | Line 89: | ||
<br clear='all'> | <br clear='all'> | ||
| − | <noinclude>'''States:''' | + | </div><noinclude>'''States:''' |
<br clear='all'>[[Image:indicator_relevance.png|thumb|300px|left|Click to view detailed control specifications]] | <br clear='all'>[[Image:indicator_relevance.png|thumb|300px|left|Click to view detailed control specifications]] | ||
<br clear='all'> | <br clear='all'> | ||
Revision as of 14:31, 9 April 2007
Determinate Progress Bars
Usage:
Behavior:
Guidelines:
Indeterminate Progress Bars
Usage:
Behavior:
Guidelines:
Activity Spinners
Usage:
Behavior:
Guidelines:
Level Indicators
Usage:
Behavior:
Guidelines:
Rating Indicators
Usage:
Behavior:
Guidelines:
Relevance Indicators
Usage:
Behavior:
Guidelines:
