Kraken Logo

Kraken Engine

DocumentationGuidesShowcaseCommunity
Ctrl
K
Navigating the Docs
Building Docs
Overview
Camera
Color
Draw
Ease
Event
Fx
Gamepad
Input
Log
Math
Mixer
Mouse
Physics
Pixel Array
Renderer
Shaders
Time
Transform
Ui
Viewport
Window

Built bydurkisneer1.Kraken Engine is open source and available onGitHub.

  1. Docs
  2. Functions
  3. Ui

Ui

A declarative UI and layout submodule.

Experimental API:

The ui submodule is an experimental and new API that is highly susceptible to breaking changes in the future.


Root

root(bounds: Rect, direction: Direction = Direction.VERTICAL, align: Align = Align.START, justify: Align = Align.START) → _RootContextroot(bounds: Rect, direction: Direction = Direction.VERTICAL, align: Align = Align.START, justify: Align = Align.START) → _RootContext

Create a root UI context for the current frame.

The root defines the available bounds for the UI tree and controls the default layout direction and alignment. Use it as a context manager.

Args

  • bounds : The available region for the UI.
  • direction : The root layout direction. Defaults to Vertical.
  • align : Cross-axis alignment for root children. Defaults to Start.
  • justify : Main-axis justification for root children. Defaults to Start.

Returns

_RootContext : A context manager that finalizes the UI when exited.

Row

row(style: Style | None = None, gap: float = 0.0, padding: float = 0.0, align: Align = Align.START, justify: Align = Align.START) → _Contextrow(style: Style | None = None, gap: float = 0.0, padding: float = 0.0, align: Align = Align.START, justify: Align = Align.START) → _Context

Create a horizontal container.

Children are laid out left to right unless the active direction or alignment settings are changed on the returned context.

Args

  • style : Base style for the container.
  • gap : Space between child elements. Defaults to 0.0.
  • padding : Inner padding of the container. Defaults to 0.0.
  • align : Cross-axis alignment for children. Defaults to Start.
  • justify : Main-axis justification for children. Defaults to Start.

Returns

_Context : A context manager for the row.

Column

column(style: Style | None = None, gap: float = 0.0, padding: float = 0.0, align: Align = Align.START, justify: Align = Align.START) → _Contextcolumn(style: Style | None = None, gap: float = 0.0, padding: float = 0.0, align: Align = Align.START, justify: Align = Align.START) → _Context

Create a vertical container.

Children are laid out top to bottom unless alignment or spacing overrides are applied on the returned context.

Args

  • style : Base style for the container.
  • gap : Space between child elements. Defaults to 0.0.
  • padding : Inner padding of the container. Defaults to 0.0.
  • align : Cross-axis alignment for children. Defaults to Start.
  • justify : Main-axis justification for children. Defaults to Start.

Returns

_Context : A context manager for the column.

Stack

stack(style: Style | None = None, padding: float = 0.0, align: Align = Align.START, justify: Align = Align.START) → _Contextstack(style: Style | None = None, padding: float = 0.0, align: Align = Align.START, justify: Align = Align.START) → _Context

Create an overlapping container.

Stack children share the same container space instead of being arranged in a linear flow.

Args

  • style : Base style for the container.
  • padding : Inner padding of the container. Defaults to 0.0.
  • align : Alignment for children inside the stack. Defaults to Start.
  • justify : Justification for children inside the stack. Defaults to Start.

Returns

_Context : A context manager for the stack.

Panel

panel(style: Style = ...) → Nonepanel(style: Style = ...) → None

Create a non-interactive container element.

Panels draw their background, texture, and borders using the provided style.

Button

button(text: str, style: Style = ...) → boolbutton(text: str, style: Style = ...) → bool

Create a clickable text button.

The button is evaluated against the previous frame's bounds and returns True when it is clicked during the current frame.

Args

  • text : The label displayed on the button.
  • style : Visual and layout settings for the button.

Returns

bool : True if the button was clicked this frame, otherwise False.

Label

label(text: str, style: Style = ...) → Nonelabel(text: str, style: Style = ...) → None

Create a non-interactive text label.

Args

  • text : The text to display.
  • style : Visual and layout settings for the label.
PreviousTransform
NextViewport

On this page

RootRowColumnStackPanelButtonLabel