87
edits
Homepage | Activities | Events | Lists | Development | Translate | Contact
Changes
Jump to navigation
Jump to search
Human Interface Guidelines/The Sugar Interface/Controls/Indicators (view source)
Revision as of 15:31, 9 April 2007
, 15:31, 9 April 2007no edit summary
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'>