Class Stepper
A control that lets users incrementally adjust a value by pressing the plus or minus buttons.
Inheritance
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class Stepper : ExVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder, INotifyValueChanged<int>Remarks
The Stepper component provides a simple way to increment or decrement numeric values through button interactions. It consists of two buttons: one for increasing and one for decreasing the value.
Steppers are particularly useful when users need to make small adjustments to a value, such as changing quantity, adjusting volume, or modifying numeric settings.
The component supports both mouse/touch interaction and keyboard navigation. Users can interact with the stepper using:
- Plus/Minus buttons
- Left/Right arrow keys
- Keyboard Plus/Minus keys
Note: The stepper's value is represented as -1 for decrement and 1 for increment, making it ideal for relative value adjustments rather than absolute values.
Examples
Basic Stepper Usage: creating a basic stepper to manage a counter value.
var stepper = new Stepper();
var count = 0;
stepper.RegisterValueChangedCallback(evt => {
count += evt.newValue;
Debug.Log($"Current count: ");
});
container.Add(stepper);
Customized Stepper with Size: creating a large stepper with custom styling in UXML.
<UXML xmlns:ui="Unity.AppUI.UI">
<ui:Stepper size="L" class="custom-stepper" />
</UXML>Stepper with Value Change Handling: implementing a volume control using a stepper with clamped values.
public class VolumeControl : VisualElement
{
private float volume = 50f;
private const float STEP = 5f;
public VolumeControl()
{
var stepper = new Stepper();
stepper.RegisterValueChangedCallback(evt => {
volume = Mathf.Clamp(volume + (STEP * evt.newValue), 0f, 100f);
Debug.Log($"Volume adjusted to: {volume}%");
});
Add(stepper);
}
}
Constructors
Stepper()
Default constructor.
Declaration
public Stepper()Fields
buttonUssClassName
The Stepper general button styling class.
Declaration
public const string buttonUssClassName = "appui-stepper__button"Field Value
| Type | Description |
|---|---|
| string |
decButtonUssClassName
The Stepper decrement button styling class.
Declaration
public const string decButtonUssClassName = "appui-stepper__decbutton"Field Value
| Type | Description |
|---|---|
| string |
decIconContainerUssClassName
The Stepper decrement icon container styling class.
Declaration
public const string decIconContainerUssClassName = "appui-stepper__iconcontainer"Field Value
| Type | Description |
|---|---|
| string |
decIconUssClassName
The Stepper decrement icon styling class.
Declaration
public const string decIconUssClassName = "appui-stepper__icon"Field Value
| Type | Description |
|---|---|
| string |
incButtonUssClassName
The Stepper increment button styling class.
Declaration
public const string incButtonUssClassName = "appui-stepper__incbutton"Field Value
| Type | Description |
|---|---|
| string |
incIconContainerUssClassName
The Stepper increment icon container styling class.
Declaration
public const string incIconContainerUssClassName = "appui-stepper__iconcontainer"Field Value
| Type | Description |
|---|---|
| string |
incIconUssClassName
The Stepper increment icon styling class.
Declaration
public const string incIconUssClassName = "appui-stepper__icon"Field Value
| Type | Description |
|---|---|
| string |
sizeUssClassName
The Stepper size styling class.
Declaration
public const string sizeUssClassName = "appui-stepper--size-"Field Value
| Type | Description |
|---|---|
| string |
ussClassName
The Stepper main styling class.
Declaration
public const string ussClassName = "appui-stepper"Field Value
| Type | Description |
|---|---|
| string |
Properties
contentContainer
The content container of the Stepper. Always null.
Declaration
public override VisualElement contentContainer { get; }Property Value
| Type | Description |
|---|---|
| VisualElement |
Overrides
size
The size of the Stepper.
Declaration
[CreateProperty]
[UxmlAttribute]
public Size size { get; set; }Property Value
| Type | Description |
|---|---|
| Size |
value
The value of the Stepper. 1 means increment, -1 means decrement.
It is not recommended to get or set this value directly. To track the changes of the value, use UnityEngine.UIElements.INotifyValueChangedExtensions.RegisterValueChangedCallback<T>(UnityEngine.UIElements.INotifyValueChanged<T>, UnityEngine.UIElements.EventCallback<UnityEngine.UIElements.ChangeEvent<T>>) instead.
Declaration
[CreateProperty]
[UxmlAttribute]
public int value { get; set; }Property Value
| Type | Description |
|---|---|
| int |
Methods
GetSizeUssClassName(Size)
Declaration
public static string GetSizeUssClassName(Size enumValue)Parameters
| Type | Name | Description |
|---|---|---|
| Size | enumValue |
Returns
| Type | Description |
|---|---|
| string |
SetValueWithoutNotify(int)
Set the value of the Stepper without notifying the listeners.
Declaration
public void SetValueWithoutNotify(int newValue)Parameters
| Type | Name | Description |
|---|---|---|
| int | newValue | The new value. |