UserGuide

Difference between revisions of "Web Segmented Button"

From Xojo Documentation

 
Line 8: Line 8:
  
 
== Events ==
 
== Events ==
[[WebSegmentedButton.Pressed|Pressed]]
+
[[WebSegmentedButton.Pressed|Pressed]] - The Pressed event is called when a segment is clicked. It supplies a itemIndex parameter (0-based) that tells you which segment was clicked.
:The Pressed event is called when a segment is clicked. It supplies a itemIndex parameter (0-based) that tells you which segment was clicked.
 
  
 
== Properties ==
 
== Properties ==
[[WebSegmentedButton.SelectedSegmentIndex|SelectedSegmentIndex]]
+
[[WebSegmentedButton.SelectedSegmentIndex|SelectedSegmentIndex]] - Gets or sets the selected segment.
:Gets or sets the selected segment.
 
  
[[WebSegmentedButton.SegmentCount|SegmentCount]]
+
[[WebSegmentedButton.SegmentCount|SegmentCount]] - This property is used to specify the number of segments.
:This property is used to specify the number of segments.
 
  
[[WebSegmentedButton.SelectionStyle|SelectionStyle]]
+
[[WebSegmentedButton.SelectionStyle|SelectionStyle]] - An Integer that indicates how the segments can be used.
:An Integer that indicates how the segments can be used.
 
 
{| class="wikitable"
 
{| class="wikitable"
 
!Value
 
!Value
Line 39: Line 35:
  
 
== Methods ==
 
== Methods ==
[[WebSegmentedButton.SegmentAt|SegmentAt]]
+
[[WebSegmentedButton.SegmentAt|SegmentAt]] - Used to set the Text or Icon property of a segment identified by the itemIndex parameter (index is zero-based).
:Used to set the Text or Icon property of a segment identified by the itemIndex parameter (index is zero-based).
 
  
 
== Usage ==
 
== Usage ==
 
[[File:Web Segmented Control.png|thumb|Web Segmented Control]]
 
[[File:Web Segmented Control.png|thumb|Web Segmented Control]]
 
Use the SegmentedControl Pressed event handler to determine which segment was clicked:
 
Use the SegmentedControl Pressed event handler to determine which segment was clicked:
<rbcode>Select Case itemIndex
+
<rbcode>
 +
Select Case itemIndex
 
Case 0
 
Case 0
 
   // First segment pressed
 
   // First segment pressed
 
Case 1
 
Case 1
 
   // Second segment pressed
 
   // Second segment pressed
End Select</rbcode>
+
End Select
 +
</rbcode>
  
 
To select a specific segment in code use the SelectedSegmentIndex property:
 
To select a specific segment in code use the SelectedSegmentIndex property:
  
 
== See Also ==
 
== See Also ==
[[WebSegmentedButton]] class; [[UserGuide:Web UI]] topic
+
[[WebSegmentedButton]] class
  
 
[[Category:User Guide]]
 
[[Category:User Guide]]

Latest revision as of 18:56, 15 February 2021

The WebSegmentedButton is a horizontal button made up of multiple segments. Each segment can be clicked independently of the others.

To edit the properties of the segments (Text, Icon and Selected) in the control, use the Set Default Value button on the Layout Editor toolbar or press Return when the control is selected.

Below are commonly used events, properties and methods. Refer to WebSegmentedButton in the Language Reference for the complete list.

Events

Pressed - The Pressed event is called when a segment is clicked. It supplies a itemIndex parameter (0-based) that tells you which segment was clicked.

Properties

SelectedSegmentIndex - Gets or sets the selected segment.

SegmentCount - This property is used to specify the number of segments.

SelectionStyle - An Integer that indicates how the segments can be used.

Value Type Description
0 Single Only one segment can be depressed. The group of segments behaves like a group of Radio Buttons. One is selected, the others are deselected automatically.
1 Multiple The segments behave like a series of Check Boxes where two or more can be selected at the same time.
2 None Each segment behaves like a Button. When a segment is selected, it is depressed (highlighted) only for the duration of the press or click.

Methods

SegmentAt - Used to set the Text or Icon property of a segment identified by the itemIndex parameter (index is zero-based).

Usage

Web Segmented Control

Use the SegmentedControl Pressed event handler to determine which segment was clicked:

Select Case itemIndex
Case 0
// First segment pressed
Case 1
// Second segment pressed
End Select

To select a specific segment in code use the SelectedSegmentIndex property:

See Also

WebSegmentedButton class