Class Pane
A resizable container element designed to be used as a child of SplitView.
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class Pane : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolderRemarks
The Pane component is a specialized container designed exclusively for use within a SplitView. It represents an individual resizable panel that users can adjust by dragging splitters between adjacent panes.
Key features:
- Flexible sizing with stretch factor control
- Automatic compact mode when resized below threshold
- Persistent state saving and restoration
- Minimum size constraints via USS
- Non-interactive by default (picking mode set to ignore)
Panes can be configured to either maintain a fixed size or stretch to fill available space. The compact mode feature allows panes to automatically collapse when they become too narrow, providing a better user experience for complex layouts.
NOTE: Panes must be direct children of a SplitView component. Using Pane outside of a SplitView is not supported.
Examples
Basic pane in a split view — creating a split view with fixed and flexible panes.
<SplitView>
<Pane style="min-width: 200px;">
<Text text="Fixed width pane" />
</Pane>
<Pane stretch-factor="1">
<Text text="Flexible pane that fills remaining space" />
</Pane>
</SplitView>Using compact mode — creating a collapsible sidebar that enters compact mode when small.
<SplitView>
<Pane compact-threshold="50" style="min-width: 50px;">
<Icon name="menu" />
</Pane>
<Pane stretch-factor="1">
<Text text="Main content" />
</Pane>
</SplitView>Proportional sizing with stretch factors — creating panes with proportional sizing.
<SplitView>
<Pane stretch-factor="1">
<Text text="Takes 1/3 of space" />
</Pane>
<Pane stretch-factor="2">
<Text text="Takes 2/3 of space" />
</Pane>
</SplitView>Saving and restoring pane state — persisting pane state across sessions.
// Save pane state
var state = pane.SaveState();
PlayerPrefs.SetString("paneState", JsonUtility.ToJson(state));
// Restore pane state later
var stateJson = PlayerPrefs.GetString("paneState");
var restoredState = JsonUtility.FromJson<Pane.State>(stateJson);
pane.RestoreState(restoredState);
Reacting to compact mode changes — handling compact mode state changes.
var pane = new Pane();
pane.compactChanged += (p) =>
{
if (p.compact)
{
// Pane entered compact mode - show icon-only view
Debug.Log("Pane collapsed");
}
else
{
// Pane expanded - show full content
Debug.Log("Pane expanded");
}
};
splitView.AddPane(pane);
Constructors
Pane()
Default constructor.
Declaration
public Pane()Fields
compactUssClassName
The USS class name of a Pane in compact mode.
Declaration
public const string compactUssClassName = "appui-pane--compact"Field Value
| Type | Description |
|---|---|
| string |
ussClassName
The USS class name of a Pane.
Declaration
public const string ussClassName = "appui-pane"Field Value
| Type | Description |
|---|---|
| string |
Properties
compactThreshold
A threshold used to snap to compact mode when the pane is resized.
Declaration
[CreateProperty]
[UxmlAttribute]
public float compactThreshold { get; set; }Property Value
| Type | Description |
|---|---|
| float |
stretch
Whether the pane can be stretched or not.
Declaration
[CreateProperty]
public bool stretch { get; set; }Property Value
| Type | Description |
|---|---|
| bool |
stretchFactor
The stretch factor of the pane.
Declaration
[CreateProperty]
[UxmlAttribute]
public float stretchFactor { get; set; }Property Value
| Type | Description |
|---|---|
| float |
Methods
RestoreState(State)
Restores the state of the Pane.
Declaration
public void RestoreState(Pane.State state)Parameters
| Type | Name | Description |
|---|---|---|
| Pane.State | state | The state of the Pane. |
SaveState()
Saves the state of the Pane.
Declaration
public Pane.State SaveState()Returns
| Type | Description |
|---|---|
| Pane.State | The state of the Pane. |
ToggleCompact()
Toggles the pane between compact and expanded mode.
Declaration
public void ToggleCompact()Events
compactChanged
Event that is triggered when the pane is toggled between compact and expanded mode.
Declaration
public event Action<Pane> compactChangedEvent Type
| Type | Description |
|---|---|
| Action<Pane> |