Collection of UI Toolkit custom controls.

• Slider2D
• AnimatedSprite
• DropdownCustom & EnumDropdownCustom
• GridListView
• RadialMenu
• RadialSlider
• Rotator
• ScrollableLabel
• ScrollViewAnimated
• ScrollViewInfinite
• Spinner
• Tooltip
• CustomEventPanel
• Custom events
• Custom manipulators

This custom component is a slider but in 2D.

The value property is compatible with ChangeEvent.

• public Vector2 MinValue: Min value for "value".
• public Vector2 MaxValue: Max value for "value".
• Bindable public Vector2 value: The slider's value.

• VSlider2DClass ("slider2d"): Class added to the slider2D.
• VDraggerClass (VSlider2DClass + "-dragger-element"): Class added to the dragger element.

public void SetValueWithoutNotify(Vector2 newValue): Sets value without triggering events.

.slider2d-dragger-element {
    position: absolute;
}

This custom component allows to easily have a sprite animation. Assets used for the animation: https://dani-maccari.itch.io/nuclear-leak-character-asset-pack.

The value property is compatible with ChangeEvent.

• Bindable public bool value: This value is true when the animation is playing and false when it's not.
• public int FrameRate: The frame rate used for the animated sprite.
• public int Loops: Number of loops for the animation. Set to -1 for unlimited loops.
• public VSpriteAnimation SpriteAnimation: Collection of Sprites used for the animated sprite.

• VAnimatedSpriteClass ("animated-sprite"): Class added to the animatedSprite.

• public void ResetAnimationIndex(int newAnimationIndex = 0): Resets the animation to the chosen index.
• public void ResetLoops(): Sets the completed loops to 0.
• public void SetValueWithoutNotify(bool newValue): Sets value without triggering events.

This custom component allows forcing the aspect ratio for its children.

• Bindable public int RatioWidth: Ratio forced for the width.
• Bindable public int RatioHeight: Ratio forced for the height.
• public bool ApplyOnlyToWideScreen: Determines whether the forced aspect ratio only applies for wide screens.

• VAspectRatioClass ("aspect-ratio"): Class added to the aspectRatio.

This custom component allows to easily style the dropdown's list.

• private string ClassToAdd: Class added to the root of the dropdown's list.
• private string ScrollClassToAdd: Class added to the ScrollView of the dropdown's list.

This custom component allows to have a listView with multiple columns.

• The UxmlAttributes used for this component mimic the ones in the ListView.

• VGridListViewClass ("grid-list-view"): Class added to the gridListView.
• VGridRowClass ("grid-row"): Class added to the gridRow.
• VLastGridRowClass (GridRowClass + "-last"): Class added to the last gridRow.

• public void BindToGrid(int[,] grid): Used to bind the data to the grid.

.grid-row {
    flex-direction: row;
    flex-grow: 1;
}

This custom component is a radial menu which is also compatible with keyboard and gamepad input.

The value property is compatible with ChangeEvent.

• Bindable public int value: Determines the selected segment.
• public int Slots: Number of segments.
• public float SlotImagePosition: Determines the distance from the center for the images.
• public float AngleOffset: Used to offset the angle to achieve a different look.

• VRadialMenuClass ("radial-menu"): Class added to the radialMenu.
• VRadialMenuSubmittedClass (RadialMenuClass + "-submitted"): Class added to the radialMenu during the NavigationSubmitEvent.
• VImageSlotClass ("image-slot"): Class added to all image slots.
• VImageSlotPosClass (ImageSlotClass + "-pos-"): Class added to the image slot. Example: "image-slot-pos-0" and "image-slot-pos-1".

• public void SetValueWithoutNotify(int newValue): Sets value without triggering events.

• --radial-background-color: Background color.
• --radial-border-color: Border color.
• --radial-segment-color: Selected segment color.
• --radial-border-width: Border width.

.image-slot {
    position: absolute;
}

This custom component is a radial slider which is also compatible with gamepad input.

The value property is compatible with ChangeEvent.

• public bool IsLoopable: Whether the slider can wrap around instead of clamping at min/max.
• public bool IsInteractive: Whether the user can interact with the slider.
• public float MinValue: Min value for "value".
• public float MaxValue: Max value for "value".
• Bindable public float value: The slider's value.
• public float StartingAngle: The angle, in degrees, where the slider’s range begins.
• public float EndingAngle: The angle, in degrees, where the slider’s range ends.
• public Vector2 CenterOffset: Used to offset the position of the radial slider.
• public LineCap BackgroundLineCap: LineCap used for the background.
• public LineCap FillLineCap: LineCap used for the fill.
• public LineCap DraggerLineCap: LineCap used for the dragger.
• public float DraggerOffset1: Distance from one side of the dragger to the center of the background.
• public float DraggerOffset2: Distance from the other side of the dragger to the center of the background.

• VRadialSliderClass ("radial-slider"): Class added the radialSlider.

• public void SetValueWithoutNotify(float newValue): Sets value without triggering events.

• --radial-background-color: Background color.
• --radial-fill-color: Fill color.
• --radial-dragger-color: Dragger color.
• --radial-background-width: Background width.
• --radial-fill-width: Fill width.
• --radial-dragger-width: Dragger width.

This custom component allows to easily change a label's value from a set of options.

The value property is compatible with ChangeEvent.

• Bindable public int value: The index of the chosen option.
• private bool HasButtons: Whether the rotator has buttons.
• private bool AreButtonsLoopable: Whether the options wrap.

• VRotatorClass ("rotator"): Class added to the rotator.

• public string GetCurrentOption(): Returns the string of the chosen option.

This custom component allows to scroll a label when it does not fit in its container.

• public string Text: TextElement's text.
• public float ScrollSpeed: The distance the text moves very ScrollRate ms.
• private long ScrollRate: Time in ms between text movements.
• private bool IsLoopable: Whether it continuously moves to the left.
• private bool IsAutomatic: Whether the user can't interact with the text and it moves automatically.
• private long MsBetweenScrollsWhenAutomatic: Waiting time between back and forward movement.

• VScrollableLabelClass ("scrollable-label"): Class added to the scrollableLabel.
• VScrollableLabelContainerClass (ScrollableLabelClass + "-container"): Class added to the scrollableLabel's container.

.scrollable-label-container {
    overflow: hidden;
}

.scrollable-label {
    position: absolute;
    margin: 0;
    padding: 0;
}

This custom component allows to smoothly scroll to its children.

• public bool StopAnimationWhenScrolling: Whether the user can stop the animated scrolling when they scroll.
• public float MinDistanceForMaxDuration: Min distance needed for max duration. If the distance is smaller, the scrolling duration will be proportionally shorter.

• VScrollViewAnimatedClass ("scroll-view-animated"): Class added to the scrollViewAnimated.
• VScrollViewAnimatedTargetClass (ScrollViewAnimatedClass + "-target"): Class added to the target during the animated scrolling.

• Smoothly scrolls to the selected element.

    public void AnimatedScrollTo(
    VisualElement element,
    float maxDuration,
    VAnimatedScrollType animatedScrollType = VAnimatedScrollType.Default,
    Ease ease = Ease.Linear)
  

This custom component allows to scroll infinitely.

• VScrollViewInfiniteClass ("scroll-view-infinite"): Class added to the scrollViewInfinite.
• VScrollViewInfiniteItemClass (VScrollViewInfiniteClass + "-item"): Class added to each item in the scrollViewInfinite.

.scroll-view-infinite-item {
    position: absolute;
}

This custom component allows to easily rotate itself.

The value property is compatible with ChangeEvent.

• Bindable public bool value: Whether the spinner is rotating.
• public float Speed: Degrees that the spinner rotates every RotationRate ms.
• private long RotationRate: Time in ms between each rotation change.

• VSpinnerClass ("spinner"): Class added to the spinner.

• public void SetValueWithoutNotify(bool newValue): Sets value without triggering events.
• public void ResetRotation(): Resets the rotation angle to 0.

• Mandatory styles

.scroll-view-infinite-item {
    position: absolute;
}

This custom component allows to easily add runtime tooltips.

• VTooltipClass ("tooltip"): Class added to the tooltip.

• public void Show(VisualElement target, VTooltipPosition tooltipPosition, bool canHaveFadeDelay = true): Shows the tooltip.
• public void Hide(): Hides the tooltip.
• public bool TryHide(): Tries to hide the tooltip.

• --fade-duration-ms: Fade duration.
• --tooltip-delay-ms: Delay to start fading.
• --offset: Distance between the tooltip and the target.

This class handles the logic to allow the tooltips to be global.

• public static bool TryGetTooltip(this IPanel panel, string tooltipClass, out VTooltip tooltip): Tries to get the tooltip with class "tooltipClass" in "panel".
• public static bool TryRegisterTooltip(this IPanel panel, string tooltipClass, out VTooltip tooltip): Tries to register a tooltip with class "tooltipClass" in "panel".
• public static bool TryUnregisterTooltip(this IPanel panel, string tooltipClass): Tries to unregister the tooltip with class "tooltipClass" in "panel".

This custom component allows to easily send custom events that should be sent after an input.

• VCustomEventPanelClass ("custom-event-panel"): Class added to the customEventPanel.

• public static bool TryGetInputActionUI(this IPanel panel, out VInputActionUI inputAction): Tries to get the VInputActionUI in "panel".
• public static bool TryRegisterInputActionUI(this IPanel panel, out VInputActionUI inputAction): Tries to register a VInputActionUI in "panel".
• public static bool TryUnregisterInputActionUI(this IPanel panel): Tries to unregister the VInputActionUI in "panel".

These events are related to input, check out the "VInputActionUI" Input Action Asset.

Event used to get the direction of the right joystick.

Event used to get the release of the Cancel button.

Event used to get the release of the Submit button.

Manipulator used to have access to PointerDownEvent while maintaining the :active pseudostate.

Manipulator used to associate a tooltip with a UI element.