Basic UI Controls

Nethgui User Interface Design

Contents

The idea is taken from alexking.org

1   Controls

Text label:

This is a paragraph.

This is another paragraph.  Your name is "E. Smith".

Text input (normal/focused):

[__________________]

[I_________________]

Text area NG556:

|____________________|
|____________________|
|____________________|
|____________________|
|____________________|

Radio button:

(o) Selected
( ) Unselected

Checkboxes:

[x] Selected
[ ] Unselected

Dropdown menu NG348:

[__________|v]

Buttons (enabled & disabled):

[ Cancel ]  | Apply |

Button list NG476:

[ Button 1 ]  [ Button 2 ]  [ Button 3 ]

Button drop-down panel (normal) NG528:

[ Button v ]

Button drop-down panel (clicked) NG528:

[ Button v ]
+--------------------+
|                    |
| // panel contents  |
|                    |
+--------------------+

Note

Panel contents can be buttons, links or any other widget.

Button set NG528:

[ Button 1 | Button 2 | Button 3 ]

Button set with upper limit (set to 1) NG528:

[ Main Action | v ]

Button set with upper limit (v is clicked) NG528:

[ Main Action | v ]
+--------------------+
| Action 2           |
| Action 3           |
| Action 4           |
+--------------------+

Basic Selector (multiple):

[x] Label1
[ ] Label2
[x] Label3
[x] Label4
[ ] Label5

Basic Selector (single):

( ) Label1
( ) Label2
(o) Label3

Progress bar NG554:

[ ########## 50% __________ ]

Slider NG1242:

[ ----O-------------------- ] Value label

2   Containers

Tabs:

 .-----------. .-----------.
 |   Tab 1   | |   Tab 2   |
-+           +-+-----------+-----------...

Dialog:

+----------------------------------+
| Title                          X |
+----------------------------------+
|                                  |
| Are you sure?                    |
|                                  |
|                  [ Yes ] [ No  ] |
+----------------------------------+

Fieldset with/without label:

.Fieldset label ------------
|
| ( ) Disabled
| (o) Enabled
|

.--------------------------
|
| ( ) Disabled
| (o) Enabled
|