Difference between revisions of "KDE Visual Design Group/HIG/GroupBox"

Jump to: navigation, search
m (7 revisions imported)
Line 2: Line 2:
  
 
== Purpose ==
 
== Purpose ==
A ''group box'' is a labeled rectangular area that surrounds a set of related controls. A ''frame'' (also known as panel) is an unlabeled rectangular area that can be used to mark relationship as well.
+
A ''group box'' is a labeled rectangular area that surrounds a set of related controls. A ''frame'' (also known as a panel) is an unlabeled rectangular area that can be used to mark relationship.
  
Both, group box and frame are a way to show relationships visually; it provides no additional functionality.
+
Group box and frame are a way to show visual relationships; it provides no additional functionality.
 
== Example ==
 
== Example ==
 
== Guidelines ==
 
== Guidelines ==
  
=== Is this the right control ===
+
=== Ask yourself, Is this the right control?===
* Always try to use a group box to arrange related controls.
+
* Always use a group box to arrange related controls.
 
* Use a frame to arrange related controls that cannot be labeled.
 
* Use a frame to arrange related controls that cannot be labeled.
 
* Do not group single controls.
 
* Do not group single controls.
* Consider to communicate relationship by layout only.
+
* Show relationship by layout only.
  
 
=== Behavior ===
 
=== Behavior ===
 
* Do not nest grouping elements; use layout to show relationships within a group.
 
* Do not nest grouping elements; use layout to show relationships within a group.
* Do not place controls in group box’ caption.
+
* Do not place controls in group box caption.
 
* Do not disable groups. To indicate that a group of controls doesn't currently apply, disable all the controls within the group, but not the group itself.
 
* Do not disable groups. To indicate that a group of controls doesn't currently apply, disable all the controls within the group, but not the group itself.
 
* Put a [[KDE_Visual_Design_Group/HIG/Splitter| splitter]] between aligned grouping controls.
 
* Put a [[KDE_Visual_Design_Group/HIG/Splitter| splitter]] between aligned grouping controls.
Line 22: Line 22:
 
===  Appearance ===
 
===  Appearance ===
 
* Label the group box with a descriptive caption.
 
* Label the group box with a descriptive caption.
* Do not assign an access key to the group box’ caption.
+
* Do not assign an access key to the group box caption.
 
* Set the group box or frame shadow to 'flat' to provide the consistent spacing required to convey relationship.
 
* Set the group box or frame shadow to 'flat' to provide the consistent spacing required to convey relationship.
  

Revision as of 02:25, 7 August 2017


Purpose

A group box is a labeled rectangular area that surrounds a set of related controls. A frame (also known as a panel) is an unlabeled rectangular area that can be used to mark relationship.

Group box and frame are a way to show visual relationships; it provides no additional functionality.

Example

Guidelines

Ask yourself, Is this the right control?

  • Always use a group box to arrange related controls.
  • Use a frame to arrange related controls that cannot be labeled.
  • Do not group single controls.
  • Show relationship by layout only.

Behavior

  • Do not nest grouping elements; use layout to show relationships within a group.
  • Do not place controls in group box caption.
  • Do not disable groups. To indicate that a group of controls doesn't currently apply, disable all the controls within the group, but not the group itself.
  • Put a splitter between aligned grouping controls.

Appearance

  • Label the group box with a descriptive caption.
  • Do not assign an access key to the group box caption.
  • Set the group box or frame shadow to 'flat' to provide the consistent spacing required to convey relationship.

Implementation


Content is available under Creative Commons License SA 4.0 unless otherwise noted.