Init
This commit is contained in:
393
content/ui-systems/ui-widgets.en.md
Normal file
393
content/ui-systems/ui-widgets.en.md
Normal file
@@ -0,0 +1,393 @@
|
||||
---
|
||||
title: UI Widgets
|
||||
type: docs
|
||||
weight: 12
|
||||
---
|
||||
|
||||
This page documents all available widget types in Hytale's UI system.
|
||||
|
||||
## Container Widgets
|
||||
|
||||
### Group
|
||||
|
||||
Basic container for organizing other widgets.
|
||||
|
||||
```
|
||||
Group #Container {
|
||||
Anchor: (Width: 400, Height: 300);
|
||||
Background: (Color: #000000(0.5));
|
||||
LayoutMode: Top;
|
||||
Padding: (Full: 16);
|
||||
|
||||
// Child widgets...
|
||||
}
|
||||
```
|
||||
|
||||
**Key Properties:**
|
||||
- `Anchor` - Position and size
|
||||
- `Background` - Background color or texture
|
||||
- `LayoutMode` - Child arrangement mode
|
||||
- `Padding` - Inner spacing
|
||||
- `Visible` - Show/hide
|
||||
- `FlexWeight` - Flexible sizing weight
|
||||
|
||||
## Text Widgets
|
||||
|
||||
### Label
|
||||
|
||||
Displays static or dynamic text.
|
||||
|
||||
```
|
||||
Label #Title {
|
||||
Text: "Hello World";
|
||||
Style: (
|
||||
FontSize: 24,
|
||||
TextColor: #ffffff,
|
||||
RenderBold: true,
|
||||
HorizontalAlignment: Center,
|
||||
VerticalAlignment: Center
|
||||
);
|
||||
Anchor: (Height: 40);
|
||||
}
|
||||
```
|
||||
|
||||
**Key Properties:**
|
||||
- `Text` - Text content (string or `%translation.key`)
|
||||
- `Style` - LabelStyle object
|
||||
- `Anchor` - Position and size
|
||||
- `Padding` - Text padding
|
||||
|
||||
## Button Widgets
|
||||
|
||||
### Button
|
||||
|
||||
Clickable button without text label.
|
||||
|
||||
```
|
||||
Button #CloseButton {
|
||||
Anchor: (Width: 32, Height: 32);
|
||||
Style: (
|
||||
Default: (Background: "CloseButton.png"),
|
||||
Hovered: (Background: "CloseButtonHovered.png"),
|
||||
Pressed: (Background: "CloseButtonPressed.png"),
|
||||
Disabled: (Background: "CloseButtonDisabled.png"),
|
||||
Sounds: @ButtonSounds
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### TextButton
|
||||
|
||||
Button with text label.
|
||||
|
||||
```
|
||||
TextButton #SubmitButton {
|
||||
Text: %ui.button.submit;
|
||||
Style: (
|
||||
Default: (
|
||||
Background: (TexturePath: "Button.png", Border: 12),
|
||||
LabelStyle: (FontSize: 16, TextColor: #ffffff)
|
||||
),
|
||||
Hovered: (
|
||||
Background: (TexturePath: "ButtonHovered.png", Border: 12),
|
||||
LabelStyle: (FontSize: 16, TextColor: #ffffff)
|
||||
),
|
||||
Pressed: (
|
||||
Background: (TexturePath: "ButtonPressed.png", Border: 12),
|
||||
LabelStyle: (FontSize: 16, TextColor: #cccccc)
|
||||
),
|
||||
Sounds: @ButtonSounds
|
||||
);
|
||||
Anchor: (Height: 44);
|
||||
Padding: (Horizontal: 24);
|
||||
}
|
||||
```
|
||||
|
||||
### BackButton
|
||||
|
||||
Pre-styled back/dismiss button.
|
||||
|
||||
```
|
||||
BackButton {}
|
||||
```
|
||||
|
||||
### ActionButton
|
||||
|
||||
Button that displays an action name with input binding.
|
||||
|
||||
```
|
||||
ActionButton #BindingInventory {
|
||||
Disabled: true;
|
||||
LayoutMode: Right;
|
||||
Alignment: Right;
|
||||
ActionName: %client.hud.inputBindings.inventory;
|
||||
Anchor: (Top: 15);
|
||||
}
|
||||
```
|
||||
|
||||
## Input Widgets
|
||||
|
||||
### TextField
|
||||
|
||||
Single-line text input.
|
||||
|
||||
```
|
||||
TextField #NameInput {
|
||||
Anchor: (Height: 38);
|
||||
Style: @DefaultInputFieldStyle;
|
||||
PlaceholderStyle: @DefaultInputFieldPlaceholderStyle;
|
||||
Background: (TexturePath: "InputBox.png", Border: 16);
|
||||
Padding: (Horizontal: 10);
|
||||
PlaceholderText: %ui.placeholder.enterName;
|
||||
}
|
||||
```
|
||||
|
||||
### NumberField
|
||||
|
||||
Numeric input field.
|
||||
|
||||
```
|
||||
NumberField #QuantityInput {
|
||||
Anchor: (Width: 100, Height: 38);
|
||||
Style: @DefaultInputFieldStyle;
|
||||
Background: (TexturePath: "InputBox.png", Border: 16);
|
||||
Padding: (Horizontal: 10);
|
||||
Min: 1;
|
||||
Max: 100;
|
||||
}
|
||||
```
|
||||
|
||||
### CompactTextField
|
||||
|
||||
Expandable search-style text field.
|
||||
|
||||
```
|
||||
CompactTextField #SearchInput {
|
||||
Anchor: (Height: 30);
|
||||
CollapsedWidth: 34;
|
||||
ExpandedWidth: 200;
|
||||
PlaceholderText: %ui.search.placeholder;
|
||||
Style: (FontSize: 16);
|
||||
PlaceholderStyle: (TextColor: #3d5a85, RenderUppercase: true, FontSize: 14);
|
||||
Padding: (Horizontal: 12, Left: 34);
|
||||
Decoration: (
|
||||
Default: (
|
||||
Icon: (Texture: "SearchIcon.png", Width: 16, Height: 16, Offset: 9),
|
||||
ClearButtonStyle: @ClearButtonStyle
|
||||
)
|
||||
);
|
||||
ExpandSound: (SoundPath: "Sounds/Expand.ogg", Volume: 6);
|
||||
CollapseSound: (SoundPath: "Sounds/Collapse.ogg", Volume: 5);
|
||||
}
|
||||
```
|
||||
|
||||
### Slider
|
||||
|
||||
Horizontal slider control.
|
||||
|
||||
```
|
||||
Slider #VolumeSlider {
|
||||
Anchor: (Width: 200, Height: 16);
|
||||
Style: (
|
||||
Background: (TexturePath: "SliderBackground.png", Border: 2),
|
||||
Handle: "SliderHandle.png",
|
||||
HandleWidth: 16,
|
||||
HandleHeight: 16,
|
||||
Sounds: (
|
||||
Activate: (SoundPath: "Tick.ogg", Volume: 10),
|
||||
MouseHover: (SoundPath: "Hover.ogg", Volume: 6)
|
||||
)
|
||||
);
|
||||
Min: 0;
|
||||
Max: 100;
|
||||
Value: 50;
|
||||
}
|
||||
```
|
||||
|
||||
### SliderNumberField
|
||||
|
||||
Combined slider with numeric display.
|
||||
|
||||
```
|
||||
SliderNumberField #BrightnessSlider {
|
||||
Anchor: (Width: 270, Height: 5);
|
||||
SliderStyle: @DefaultSliderStyle;
|
||||
NumberFieldStyle: @DefaultInputFieldStyle;
|
||||
}
|
||||
```
|
||||
|
||||
### CheckBox
|
||||
|
||||
Toggle checkbox.
|
||||
|
||||
```
|
||||
CheckBox #EnableOption {
|
||||
Anchor: (Width: 22, Height: 22);
|
||||
Background: (TexturePath: "CheckBoxFrame.png", Border: 7);
|
||||
Padding: (Full: 4);
|
||||
Style: (
|
||||
Unchecked: (
|
||||
DefaultBackground: (Color: #00000000),
|
||||
HoveredBackground: (Color: #00000000),
|
||||
ChangedSound: (SoundPath: "Untick.ogg", Volume: 6)
|
||||
),
|
||||
Checked: (
|
||||
DefaultBackground: (TexturePath: "Checkmark.png"),
|
||||
HoveredBackground: (TexturePath: "Checkmark.png"),
|
||||
ChangedSound: (SoundPath: "Tick.ogg", Volume: 6)
|
||||
)
|
||||
);
|
||||
Value: false;
|
||||
}
|
||||
```
|
||||
|
||||
### DropdownBox
|
||||
|
||||
Dropdown selection menu.
|
||||
|
||||
```
|
||||
DropdownBox #LanguageSelector {
|
||||
Anchor: (Width: 330, Height: 32);
|
||||
Style: (
|
||||
DefaultBackground: (TexturePath: "Dropdown.png", Border: 16),
|
||||
HoveredBackground: (TexturePath: "DropdownHovered.png", Border: 16),
|
||||
PressedBackground: (TexturePath: "DropdownPressed.png", Border: 16),
|
||||
DefaultArrowTexturePath: "DropdownCaret.png",
|
||||
ArrowWidth: 13,
|
||||
ArrowHeight: 18,
|
||||
LabelStyle: (TextColor: #96a9be, FontSize: 13),
|
||||
PanelBackground: (TexturePath: "DropdownBox.png", Border: 16),
|
||||
EntryHeight: 31,
|
||||
EntriesInViewport: 10,
|
||||
Sounds: @DropdownBoxSounds
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Display Widgets
|
||||
|
||||
### Sprite
|
||||
|
||||
Animated or static image.
|
||||
|
||||
```
|
||||
Sprite #LoadingSpinner {
|
||||
Anchor: (Width: 32, Height: 32);
|
||||
TexturePath: "Spinner.png";
|
||||
Frame: (Width: 32, Height: 32, PerRow: 8, Count: 72);
|
||||
FramesPerSecond: 30;
|
||||
}
|
||||
```
|
||||
|
||||
### AssetImage
|
||||
|
||||
Display an asset image (item icon, etc.).
|
||||
|
||||
```
|
||||
AssetImage #ItemIcon {
|
||||
Anchor: (Width: 64, Height: 64);
|
||||
}
|
||||
```
|
||||
|
||||
### ProgressBar
|
||||
|
||||
Progress indicator bar.
|
||||
|
||||
```
|
||||
ProgressBar #HealthBar {
|
||||
Anchor: (Width: 200, Height: 20);
|
||||
BarTexturePath: "HealthBarFill.png";
|
||||
Alignment: Horizontal;
|
||||
Direction: Start;
|
||||
Value: 0.75;
|
||||
}
|
||||
```
|
||||
|
||||
**Properties:**
|
||||
- `Alignment` - `Horizontal` or `Vertical`
|
||||
- `Direction` - `Start` or `End`
|
||||
- `Value` - 0.0 to 1.0
|
||||
|
||||
## Inventory Widgets
|
||||
|
||||
### ItemGrid
|
||||
|
||||
Grid display for inventory items.
|
||||
|
||||
```
|
||||
ItemGrid #HotbarGrid {
|
||||
SlotsPerRow: 9;
|
||||
Style: (
|
||||
SlotBackground: "ItemSlot.png",
|
||||
SlotSize: 64,
|
||||
SlotSpacing: 4,
|
||||
HoveredSlotBackground: "ItemSlotHovered.png",
|
||||
SelectedSlotBackground: "ItemSlotSelected.png"
|
||||
);
|
||||
Background: (TexturePath: "HotbarBackground.png", Border: 10);
|
||||
Padding: 4;
|
||||
RenderItemQualityBackground: true;
|
||||
AreItemsDraggable: true;
|
||||
}
|
||||
```
|
||||
|
||||
## Navigation Widgets
|
||||
|
||||
### TabNavigation
|
||||
|
||||
Tab-based navigation.
|
||||
|
||||
```
|
||||
TabNavigation #CategoryTabs {
|
||||
Style: (
|
||||
TabStyle: (
|
||||
Default: (Background: "Tab.png", IconAnchor: (Width: 44, Height: 44)),
|
||||
Hovered: (Background: "TabHovered.png"),
|
||||
Pressed: (Background: "TabPressed.png")
|
||||
),
|
||||
SelectedTabStyle: (
|
||||
Default: (Background: "TabSelected.png", Overlay: "TabSelectedOverlay.png")
|
||||
),
|
||||
TabSounds: @TabSounds
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Tooltip Properties
|
||||
|
||||
Many widgets support tooltips:
|
||||
|
||||
```
|
||||
TextButton #InfoButton {
|
||||
TooltipText: %ui.tooltip.info;
|
||||
TextTooltipStyle: (
|
||||
Background: (TexturePath: "TooltipBackground.png", Border: 24),
|
||||
MaxWidth: 400,
|
||||
LabelStyle: (Wrap: true, FontSize: 16),
|
||||
Padding: 24
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Widget Summary Table
|
||||
|
||||
| Widget | Purpose |
|
||||
|--------|---------|
|
||||
| `Group` | Container for layout |
|
||||
| `Label` | Text display |
|
||||
| `Button` | Clickable button |
|
||||
| `TextButton` | Button with text |
|
||||
| `BackButton` | Pre-styled back button |
|
||||
| `ActionButton` | Action with keybind display |
|
||||
| `TextField` | Text input |
|
||||
| `NumberField` | Numeric input |
|
||||
| `CompactTextField` | Expandable search field |
|
||||
| `Slider` | Slider control |
|
||||
| `SliderNumberField` | Slider with number display |
|
||||
| `CheckBox` | Toggle checkbox |
|
||||
| `DropdownBox` | Selection dropdown |
|
||||
| `Sprite` | Image/animation |
|
||||
| `AssetImage` | Asset icon display |
|
||||
| `ProgressBar` | Progress indicator |
|
||||
| `ItemGrid` | Inventory grid |
|
||||
| `TabNavigation` | Tab navigation |
|
||||
Reference in New Issue
Block a user