---
title: Widgets UI
type: docs
weight: 12
---

Cette page documente tous les types de widgets disponibles dans le système UI de Hytale.

## Widgets Conteneurs

### Group

Conteneur de base pour organiser d'autres widgets.

```
Group #Container {
  Anchor: (Width: 400, Height: 300);
  Background: (Color: #000000(0.5));
  LayoutMode: Top;
  Padding: (Full: 16);

  // Widgets enfants...
}
```

**Propriétés Clés :**
- `Anchor` - Position et taille
- `Background` - Couleur ou texture de fond
- `LayoutMode` - Mode d'arrangement des enfants
- `Padding` - Espacement intérieur
- `Visible` - Afficher/masquer
- `FlexWeight` - Poids de dimensionnement flexible

## Widgets Texte

### Label

Affiche du texte statique ou dynamique.

```
Label #Title {
  Text: "Bonjour le monde";
  Style: (
    FontSize: 24,
    TextColor: #ffffff,
    RenderBold: true,
    HorizontalAlignment: Center,
    VerticalAlignment: Center
  );
  Anchor: (Height: 40);
}
```

**Propriétés Clés :**
- `Text` - Contenu texte (chaîne ou `%translation.key`)
- `Style` - Objet LabelStyle
- `Anchor` - Position et taille
- `Padding` - Marge du texte

## Widgets Boutons

### Button

Bouton cliquable sans label texte.

```
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

Bouton avec label texte.

```
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

Bouton retour/fermer pré-stylisé.

```
BackButton {}
```

### ActionButton

Bouton qui affiche un nom d'action avec sa touche associée.

```
ActionButton #BindingInventory {
  Disabled: true;
  LayoutMode: Right;
  Alignment: Right;
  ActionName: %client.hud.inputBindings.inventory;
  Anchor: (Top: 15);
}
```

## Widgets de Saisie

### TextField

Champ de saisie texte mono-ligne.

```
TextField #NameInput {
  Anchor: (Height: 38);
  Style: @DefaultInputFieldStyle;
  PlaceholderStyle: @DefaultInputFieldPlaceholderStyle;
  Background: (TexturePath: "InputBox.png", Border: 16);
  Padding: (Horizontal: 10);
  PlaceholderText: %ui.placeholder.enterName;
}
```

### NumberField

Champ de saisie numérique.

```
NumberField #QuantityInput {
  Anchor: (Width: 100, Height: 38);
  Style: @DefaultInputFieldStyle;
  Background: (TexturePath: "InputBox.png", Border: 16);
  Padding: (Horizontal: 10);
  Min: 1;
  Max: 100;
}
```

### CompactTextField

Champ de texte extensible style recherche.

```
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

Contrôle curseur horizontal.

```
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

Curseur combiné avec affichage numérique.

```
SliderNumberField #BrightnessSlider {
  Anchor: (Width: 270, Height: 5);
  SliderStyle: @DefaultSliderStyle;
  NumberFieldStyle: @DefaultInputFieldStyle;
}
```

### CheckBox

Case à cocher.

```
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

Menu de sélection déroulant.

```
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
  );
}
```

## Widgets d'Affichage

### Sprite

Image animée ou statique.

```
Sprite #LoadingSpinner {
  Anchor: (Width: 32, Height: 32);
  TexturePath: "Spinner.png";
  Frame: (Width: 32, Height: 32, PerRow: 8, Count: 72);
  FramesPerSecond: 30;
}
```

### AssetImage

Affiche une image d'asset (icône d'item, etc.).

```
AssetImage #ItemIcon {
  Anchor: (Width: 64, Height: 64);
}
```

### ProgressBar

Barre de progression.

```
ProgressBar #HealthBar {
  Anchor: (Width: 200, Height: 20);
  BarTexturePath: "HealthBarFill.png";
  Alignment: Horizontal;
  Direction: Start;
  Value: 0.75;
}
```

**Propriétés :**
- `Alignment` - `Horizontal` ou `Vertical`
- `Direction` - `Start` ou `End`
- `Value` - 0.0 à 1.0

## Widgets d'Inventaire

### ItemGrid

Grille d'affichage pour les items d'inventaire.

```
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;
}
```

## Widgets de Navigation

### TabNavigation

Navigation par onglets.

```
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
  );
}
```

## Propriétés de Tooltip

De nombreux widgets supportent les tooltips :

```
TextButton #InfoButton {
  TooltipText: %ui.tooltip.info;
  TextTooltipStyle: (
    Background: (TexturePath: "TooltipBackground.png", Border: 24),
    MaxWidth: 400,
    LabelStyle: (Wrap: true, FontSize: 16),
    Padding: 24
  );
}
```

## Tableau Récapitulatif des Widgets

| Widget | Usage |
|--------|-------|
| `Group` | Conteneur pour la mise en page |
| `Label` | Affichage de texte |
| `Button` | Bouton cliquable |
| `TextButton` | Bouton avec texte |
| `BackButton` | Bouton retour pré-stylisé |
| `ActionButton` | Action avec affichage de touche |
| `TextField` | Saisie de texte |
| `NumberField` | Saisie numérique |
| `CompactTextField` | Champ de recherche extensible |
| `Slider` | Contrôle curseur |
| `SliderNumberField` | Curseur avec affichage numérique |
| `CheckBox` | Case à cocher |
| `DropdownBox` | Menu déroulant de sélection |
| `Sprite` | Image/animation |
| `AssetImage` | Affichage d'icône d'asset |
| `ProgressBar` | Indicateur de progression |
| `ItemGrid` | Grille d'inventaire |
| `TabNavigation` | Navigation par onglets |