Class PageIndicator
A component that displays a series of dots to indicate and navigate between multiple pages or slides.
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class PageIndicator : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder, INotifyValueChanged<int>Remarks
The PageIndicator is a UI component that displays a sequence of interactive dots, commonly used in carousels, slideshows, or any content that spans multiple pages. Each dot represents a page, with the current page highlighted.
The component supports both horizontal and vertical layouts, keyboard navigation, and can be controlled programmatically or through user interaction.
Note: The PageIndicator is designed to be used as a navigation aid and should be combined with the actual content container that displays the pages.
Examples
Basic Usage. Creating a basic horizontal page indicator with three dots and handling page changes.
<UXML>
<PageIndicator name="pageIndicator" count="3" direction="Horizontal" />
</UXML>
// C#
pageIndicator.RegisterCallback<ChangeEvent<int>>((evt) => {
// Handle page change
var newPageIndex = evt.newValue;
UpdatePageContent(newPageIndex);
});
Image Carousel Integration. Implementing an image carousel with PageIndicator for navigation.
public class ImageCarousel : VisualElement
{
private PageIndicator m_PageIndicator;
private VisualElement m_ImageContainer;
public ImageCarousel()
{
// Setup image container
m_ImageContainer = new VisualElement();
Add(m_ImageContainer);
// Setup page indicator
m_PageIndicator = new PageIndicator();
m_PageIndicator.count = 5; // For 5 images
m_PageIndicator.RegisterCallback<ChangeEvent<int>>((evt) => {
ShowImage(evt.newValue);
});
Add(m_PageIndicator);
}
private void ShowImage(int index)
{
// Update image display logic
}
}
Keyboard Navigation. Demonstrating keyboard navigation and programmatic page changes.
// The PageIndicator supports keyboard navigation out of the box:
// - Left/Right arrows for horizontal layout
// - Up/Down arrows for vertical layout
// You can also programmatically navigate:
pageIndicator.GoToNext(); // Move to next page
pageIndicator.GoToPrevious(); // Move to previous page
Constructors
PageIndicator()
Default constructor.
Declaration
public PageIndicator()Fields
dotBackgroundUssClassName
The PageIndicator dot background styling class.
Declaration
public const string dotBackgroundUssClassName = "appui-page-indicator__dot-background"Field Value
| Type | Description |
|---|---|
| string |
dotContentUssClassName
The PageIndicator dot content styling class.
Declaration
public const string dotContentUssClassName = "appui-page-indicator__dot-content"Field Value
| Type | Description |
|---|---|
| string |
dotUssClassName
The PageIndicator dot styling class.
Declaration
public const string dotUssClassName = "appui-page-indicator__dot"Field Value
| Type | Description |
|---|---|
| string |
ussClassName
The PageIndicator main styling class.
Declaration
public const string ussClassName = "appui-page-indicator"Field Value
| Type | Description |
|---|---|
| string |
variantUssClassName
The PageIndicator direction styling class.
Declaration
public const string variantUssClassName = "appui-page-indicator--"Field Value
| Type | Description |
|---|---|
| string |
Properties
contentContainer
The content container of the PageIndicator. This is always null.
Declaration
public override VisualElement contentContainer { get; }Property Value
| Type | Description |
|---|---|
| VisualElement |
Overrides
count
The number of dots.
Declaration
[CreateProperty]
[UxmlAttribute]
public int count { get; set; }Property Value
| Type | Description |
|---|---|
| int |
direction
The PageIndicator direction (horizontal or vertical).
Declaration
[CreateProperty]
[UxmlAttribute]
public Direction direction { get; set; }Property Value
| Type | Description |
|---|---|
| Direction |
value
The currently selected dot index.
Declaration
[CreateProperty]
[UxmlAttribute]
public int value { get; set; }Property Value
| Type | Description |
|---|---|
| int |
Methods
GetDirectionUssClassName(Direction)
Declaration
public static string GetDirectionUssClassName(Direction enumValue)Parameters
| Type | Name | Description |
|---|---|---|
| Direction | enumValue |
Returns
| Type | Description |
|---|---|
| string |
GoToNext()
Go to the next dot.
Declaration
public bool GoToNext()Returns
| Type | Description |
|---|---|
| bool | True if the dot has been changed. |
GoToPrevious()
Go to the previous dot.
Declaration
public bool GoToPrevious()Returns
| Type | Description |
|---|---|
| bool | True if the dot has been changed. |
SetValueWithoutNotify(int)
Set the value of the PageIndicator without notifying the listeners.
Declaration
public void SetValueWithoutNotify(int newValue)Parameters
| Type | Name | Description |
|---|---|---|
| int | newValue | The new value. |