---
title: Styles UI
type: docs
weight: 14
---

Cette page documente le système de styles pour les widgets UI de Hytale.

## États de Style

Les widgets interactifs supportent plusieurs états :

| État | Quand Appliqué |
|------|----------------|
| `Default` | État normal |
| `Hovered` | Souris sur le widget |
| `Pressed` | Bouton de souris maintenu |
| `Disabled` | Widget désactivé |

```
Style: (
  Default: (Background: "Button.png"),
  Hovered: (Background: "ButtonHovered.png"),
  Pressed: (Background: "ButtonPressed.png"),
  Disabled: (Background: "ButtonDisabled.png")
);
```

## LabelStyle

Style de texte pour les widgets Label.

```
@MyLabelStyle = LabelStyle(
  FontSize: 16,
  FontName: "Default",           // ou "Secondary"
  TextColor: #ffffff,
  RenderBold: true,
  RenderUppercase: false,
  LetterSpacing: 0,
  Wrap: false,
  HorizontalAlignment: Center,   // Start, Center, End
  VerticalAlignment: Center,     // Top, Center, Bottom
  OutlineColor: #000000(0.5)
);

Label {
  Style: @MyLabelStyle;
}
```

### Propriétés LabelStyle

| Propriété | Type | Description |
|-----------|------|-------------|
| `FontSize` | nombre | Taille du texte |
| `FontName` | chaîne | Famille de police ("Default", "Secondary") |
| `TextColor` | couleur | Couleur du texte |
| `RenderBold` | bool | Texte en gras |
| `RenderUppercase` | bool | Forcer les majuscules |
| `LetterSpacing` | nombre | Espace entre les caractères |
| `Wrap` | bool | Activer le retour à la ligne |
| `HorizontalAlignment` | enum | Start, Center, End |
| `VerticalAlignment` | enum | Top, Center, Bottom |
| `OutlineColor` | couleur | Couleur du contour du texte |
| `Alignment` | enum | Raccourci pour les deux alignements (Center) |

## ButtonStyle

Style pour les widgets Button (sans texte).

```
@MyButtonStyle = ButtonStyle(
  Default: (Background: (TexturePath: "Button.png", Border: 12)),
  Hovered: (Background: (TexturePath: "ButtonHovered.png", Border: 12)),
  Pressed: (Background: (TexturePath: "ButtonPressed.png", Border: 12)),
  Disabled: (Background: (TexturePath: "ButtonDisabled.png", Border: 12)),
  Sounds: @ButtonSounds
);

Button {
  Style: @MyButtonStyle;
}
```

### Propriétés d'État Button

| Propriété | Type | Description |
|-----------|------|-------------|
| `Background` | PatchStyle | Apparence du fond |

## TextButtonStyle

Style pour les widgets TextButton.

```
@MyTextButtonStyle = TextButtonStyle(
  Default: (
    Background: (TexturePath: "Button.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #bfcdd5, RenderBold: true)
  ),
  Hovered: (
    Background: (TexturePath: "ButtonHovered.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #ffffff, RenderBold: true)
  ),
  Pressed: (
    Background: (TexturePath: "ButtonPressed.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #aaaaaa, RenderBold: true)
  ),
  Disabled: (
    Background: (TexturePath: "ButtonDisabled.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #797b7c, RenderBold: true)
  ),
  Sounds: @ButtonSounds
);
```

### Propriétés d'État TextButton

| Propriété | Type | Description |
|-----------|------|-------------|
| `Background` | PatchStyle | Apparence du fond |
| `LabelStyle` | LabelStyle | Style du texte |

## PatchStyle

Configuration de texture 9-patch pour les fonds étirables.

```
@MyPatchStyle = PatchStyle(
  TexturePath: "Panel.png",
  Border: 16                    // Bordure uniforme
);

@MyPatchStyle2 = PatchStyle(
  TexturePath: "Button.png",
  HorizontalBorder: 80,         // Bordure gauche/droite
  VerticalBorder: 12            // Bordure haut/bas
);

// Avec teinte de couleur
@ColoredPatch = PatchStyle(
  Color: #ff0000(0.5)           // Rouge semi-transparent
);
```

### Propriétés PatchStyle

| Propriété | Type | Description |
|-----------|------|-------------|
| `TexturePath` | chaîne | Chemin vers le fichier texture |
| `Border` | nombre | Bordure 9-patch uniforme |
| `HorizontalBorder` | nombre | Bordure 9-patch gauche/droite |
| `VerticalBorder` | nombre | Bordure 9-patch haut/bas |
| `Color` | couleur | Couleur unie (au lieu de texture) |

## InputFieldStyle

Style pour les champs de saisie texte.

```
@MyInputStyle = InputFieldStyle(
  TextColor: #ffffff,
  FontSize: 16
);

@MyPlaceholderStyle = InputFieldStyle(
  TextColor: #6e7da1
);

TextField {
  Style: @MyInputStyle;
  PlaceholderStyle: @MyPlaceholderStyle;
}
```

## SliderStyle

Style pour les contrôles curseur.

```
@MySliderStyle = SliderStyle(
  Background: (TexturePath: "SliderBackground.png", Border: 2),
  Handle: "SliderHandle.png",
  HandleWidth: 16,
  HandleHeight: 16,
  Sounds: (
    Activate: (SoundPath: "SliderTick.ogg", Volume: 10),
    MouseHover: (SoundPath: "Hover.ogg", Volume: 6)
  )
);
```

### Propriétés SliderStyle

| Propriété | Type | Description |
|-----------|------|-------------|
| `Background` | PatchStyle | Fond de la piste |
| `Handle` | chaîne | Chemin texture de la poignée |
| `HandleWidth` | nombre | Largeur de la poignée |
| `HandleHeight` | nombre | Hauteur de la poignée |
| `Sounds` | objet | Effets sonores |

## CheckBoxStyle

Style pour les cases à cocher.

```
@MyCheckBoxStyle = CheckBoxStyle(
  Unchecked: (
    DefaultBackground: (Color: #00000000),
    HoveredBackground: (Color: #ffffff20),
    PressedBackground: (Color: #ffffff10),
    DisabledBackground: (Color: #424242),
    ChangedSound: (SoundPath: "Untick.ogg", Volume: 6)
  ),
  Checked: (
    DefaultBackground: (TexturePath: "Checkmark.png"),
    HoveredBackground: (TexturePath: "Checkmark.png"),
    PressedBackground: (TexturePath: "Checkmark.png"),
    ChangedSound: (SoundPath: "Tick.ogg", Volume: 6)
  )
);
```

## DropdownBoxStyle

Style pour les menus déroulants.

```
@MyDropdownStyle = DropdownBoxStyle(
  DefaultBackground: (TexturePath: "Dropdown.png", Border: 16),
  HoveredBackground: (TexturePath: "DropdownHovered.png", Border: 16),
  PressedBackground: (TexturePath: "DropdownPressed.png", Border: 16),
  DefaultArrowTexturePath: "DropdownCaret.png",
  HoveredArrowTexturePath: "DropdownCaret.png",
  PressedArrowTexturePath: "DropdownCaretPressed.png",
  ArrowWidth: 13,
  ArrowHeight: 18,
  LabelStyle: (TextColor: #96a9be, FontSize: 13),
  EntryLabelStyle: (TextColor: #b7cedd),
  SelectedEntryLabelStyle: (TextColor: #b7cedd, RenderBold: true),
  HorizontalPadding: 8,
  PanelBackground: (TexturePath: "DropdownBox.png", Border: 16),
  PanelPadding: 6,
  PanelAlign: Right,                // ou Bottom
  PanelOffset: 7,
  EntryHeight: 31,
  EntriesInViewport: 10,
  HoveredEntryBackground: (Color: #0a0f17),
  PressedEntryBackground: (Color: #0f1621),
  Sounds: @DropdownBoxSounds,
  EntrySounds: @ButtonSounds
);
```

## ScrollbarStyle

Style pour les barres de défilement.

```
@MyScrollbarStyle = ScrollbarStyle(
  Spacing: 6,
  Size: 6,
  Background: (TexturePath: "Scrollbar.png", Border: 3),
  Handle: (TexturePath: "ScrollbarHandle.png", Border: 3),
  HoveredHandle: (TexturePath: "ScrollbarHandleHovered.png", Border: 3),
  DraggedHandle: (TexturePath: "ScrollbarHandleDragged.png", Border: 3),
  OnlyVisibleWhenHovered: false
);
```

## TabNavigationStyle

Style pour la navigation par onglets.

```
@TabStyle = TabStyleState(
  Background: "Tab.png",
  Overlay: "TabOverlay.png",
  IconAnchor: (Width: 44, Height: 44),
  Anchor: (Width: 82, Height: 62)
);

@MyTabsStyle = TabNavigationStyle(
  TabStyle: (
    Default: @TabStyle,
    Hovered: (...@TabStyle, Background: "TabHovered.png"),
    Pressed: (...@TabStyle, Background: "TabPressed.png")
  ),
  SelectedTabStyle: (
    Default: (
      ...@TabStyle,
      Overlay: "TabSelectedOverlay.png"
    )
  ),
  TabSounds: @TabSounds,
  SeparatorAnchor: (Width: 5, Height: 34),
  SeparatorBackground: "TabSeparator.png"
);
```

## TextTooltipStyle

Style pour les infobulles texte.

```
@MyTooltipStyle = TextTooltipStyle(
  Background: (TexturePath: "TooltipBackground.png", Border: 24),
  MaxWidth: 400,
  LabelStyle: (Wrap: true, FontSize: 16),
  Padding: 24
);
```

## Définitions de Sons

Les sons sont définis comme des objets avec des propriétés audio.

```
@ButtonSounds = (
  Activate: (
    SoundPath: "Sounds/ButtonActivate.ogg",
    Volume: 6,
    MinPitch: -0.2,
    MaxPitch: 0.2
  ),
  MouseHover: (
    SoundPath: "Sounds/ButtonHover.ogg",
    Volume: 6
  )
);

@DropdownBoxSounds = DropdownBoxSounds(
  Activate: (SoundPath: "Tick.ogg", Volume: 6),
  MouseHover: (SoundPath: "Hover.ogg", Volume: 6),
  Close: (SoundPath: "Untick.ogg", Volume: 6)
);
```

### Propriétés de Son

| Propriété | Type | Description |
|-----------|------|-------------|
| `SoundPath` | chaîne | Chemin vers le fichier audio |
| `Volume` | nombre | Niveau de volume (peut être négatif) |
| `MinPitch` | nombre | Variation de hauteur minimale |
| `MaxPitch` | nombre | Variation de hauteur maximale |

## Héritage de Styles

Utilisez l'opérateur spread pour étendre les styles :

```
@BaseButtonStyle = TextButtonStyle(
  Default: (Background: @DefaultBg, LabelStyle: @DefaultLabel),
  Hovered: (Background: @HoveredBg, LabelStyle: @DefaultLabel),
  Pressed: (Background: @PressedBg, LabelStyle: @DefaultLabel),
  Sounds: @ButtonSounds
);

@DestructiveButtonStyle = TextButtonStyle(
  ...@BaseButtonStyle,
  Default: (...@BaseButtonStyle.Default, Background: @DestructiveBg),
  Sounds: @DestructiveSounds
);
```