Difference between revisions of "Human Interface Guidelines/The Sugar Interface/Controls/Text Controls"
Jump to navigation
Jump to search
m (moved Design Team/Human Interface Guidelines/The Sugar Interface/Controls/Text Controls to Human Interface Guidelines/The Sugar Interface/Controls/Text Controls: restructure) |
|||
| (6 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| − | <noinclude>{{Translations}}</noinclude> | + | <noinclude>{{Translations}}{{GoogleTrans-en}}</noinclude> |
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Indicators|p_label=Indicators|c_link=The Sugar Interface/Controls/Text Controls|c_label=Text Controls|n_link=The Sugar Interface/Controls/View Controls|n_label=View Controls}}</noinclude> | <noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Indicators|p_label=Indicators|c_link=The Sugar Interface/Controls/Text Controls|c_label=Text Controls|n_link=The Sugar Interface/Controls/View Controls|n_label=View Controls}}</noinclude> | ||
| + | <div style="position: relative; padding-right: 15px;"> | ||
| + | <div style="position: absolute; right: 0px; width: 300px; height: 100%; background: #4b4b4b;"></div> | ||
=====Text Fields===== | =====Text Fields===== | ||
| + | [[Image:example_textfield.png|right]] | ||
| + | <div style="margin-right: 310px;"> | ||
| + | '''Usage:''' | ||
| + | |||
| + | '''Behavior:''' | ||
| + | |||
| + | '''Guidelines:''' | ||
| + | |||
| + | <br clear='all'></div> | ||
| + | <noinclude>'''States:''' | ||
| + | <br clear='all'>[[Image:textfield.png|thumb|400px|left|Click to view detailed control specifications]] | ||
| + | <br clear='all'> | ||
| + | </noinclude> | ||
| − | |||
=====Tokenized Text Fields===== | =====Tokenized Text Fields===== | ||
| + | [[Image:example_textfield_tokenized.png|right]] | ||
| + | <br><br><br><br>[[Image:example_textfield_tokenized_suggestions.png|right]] | ||
| + | <div style="margin-right: 310px;"> | ||
| + | '''Usage:''' | ||
| − | <noinclude>'''States:'''<br>[[Image:textfield_tokenized.png]]</noinclude> | + | '''Behavior:''' |
| + | |||
| + | '''Guidelines:''' | ||
| + | |||
| + | <br clear='all'></div> | ||
| + | <noinclude>'''States:''' | ||
| + | <br clear='all'>[[Image:textfield_tokenized.png|thumb|400px|left|Click to view detailed control specifications]] | ||
| + | <br clear='all'> | ||
| + | </noinclude> | ||
=====Search Fields===== | =====Search Fields===== | ||
| + | [[Image:example_searchfield.png|right]] | ||
| + | <br><br><br><br>[[Image:example_searchfield_suggestions.png|right]] | ||
| + | <div style="margin-right: 310px;"> | ||
| + | '''Usage:''' | ||
| − | <noinclude>'''States:'''<br>[[Image:searchfield.png]]</noinclude> | + | '''Behavior:''' |
| + | |||
| + | '''Guidelines:''' | ||
| + | |||
| + | <br clear='all'></div> | ||
| + | <noinclude>'''States:''' | ||
| + | <br clear='all'>[[Image:searchfield.png|thumb|400px|left|Click to view detailed control specifications]] | ||
| + | <br clear='all'> | ||
| + | </noinclude> | ||
=====Tokenized Search Fields===== | =====Tokenized Search Fields===== | ||
| + | <div style="margin-right: 310px;"> | ||
| + | '''Usage:''' | ||
| − | <noinclude>''States:'''</noinclude> | + | '''Behavior:''' |
| + | |||
| + | '''Guidelines:''' | ||
| + | |||
| + | <br clear='all'></div> | ||
| + | <noinclude>'''States:''' | ||
| + | <br clear='all'> | ||
| + | <br clear='all'> | ||
| + | </noinclude> | ||
=====Password Fields===== | =====Password Fields===== | ||
| + | [[Image:example_passwordfield.png|right]] | ||
| + | [[Image:example_passwordfield_entry.png|right]] | ||
| + | <div style="margin-right: 310px;"> | ||
| + | '''Usage:''' | ||
| + | |||
| + | '''Behavior:''' | ||
| + | |||
| + | '''Guidelines:''' | ||
| − | <noinclude>'''States:'''<br>[[Image:passwordfield.png]]</noinclude> | + | <br clear='all'></div> |
| + | <noinclude>'''States:''' | ||
| + | <br clear='all'>[[Image:passwordfield.png|thumb|400px|left|Click to view detailed control specifications]] | ||
| + | <br clear='all'> | ||
| + | </noinclude> | ||
=====Multiline Text Fields===== | =====Multiline Text Fields===== | ||
| + | [[Image:example_textfield_multiline.png|right]] | ||
| + | <div style="margin-right: 310px;"> | ||
| + | '''Usage:''' | ||
| + | |||
| + | '''Behavior:''' | ||
| + | |||
| + | '''Guidelines:''' | ||
| − | <noinclude>'''States:'''<br>[[Image:textfield_multiline_non-edit.png]]<br>[[Image:textfield_multiline_edit.png]]<br>[[Image:textfield_multiline_scrollbar.png]]</noinclude> | + | <br clear='all'></div> |
| + | <noinclude>'''States:''' | ||
| + | <br clear='all'>[[Image:textfield.png|thumb|400px|left|Click to view detailed control specifications]] | ||
| + | <br clear='all'>[[Image:textfield_multiline_non-edit.png|thumb|400px|left|Click to view detailed control specifications]] | ||
| + | <br clear='all'>[[Image:textfield_multiline_edit.png|thumb|400px|left|Click to view detailed control specifications]] | ||
| + | <br clear='all'>[[Image:textfield_multiline_scrollbar.png|thumb|400px|left|Click to view detailed control specifications]] | ||
| + | <br clear='all'> | ||
| + | </noinclude> | ||
| + | </div> | ||
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Indicators|p_label=Indicators|c_link=The Sugar Interface/Controls/Text Controls|c_label=Text Controls|n_link=The Sugar Interface/Controls/View Controls|n_label=View Controls}}</noinclude> | <noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Indicators|p_label=Indicators|c_link=The Sugar Interface/Controls/Text Controls|c_label=Text Controls|n_link=The Sugar Interface/Controls/View Controls|n_label=View Controls}}</noinclude> | ||
Latest revision as of 08:16, 7 July 2009
Text Fields
Usage:
Behavior:
Guidelines:
States:
Tokenized Text Fields
Usage:
Behavior:
Guidelines:
States:
Search Fields
Usage:
Behavior:
Guidelines:
States:
Tokenized Search Fields
Usage:
Behavior:
Guidelines:
States:
Password Fields
Usage:
Behavior:
Guidelines:
States:
Multiline Text Fields
Usage:
Behavior:
Guidelines:
States:
