---
title: Propriétés UI
type: docs
weight: 13
---

Cette page documente les propriétés communes disponibles sur les widgets UI.

## Anchor (Positionnement)

La propriété `Anchor` contrôle la position et la taille du widget.

### Propriétés de Position

```
Anchor: (
  Left: 10,      // Distance depuis le bord gauche
  Right: 10,     // Distance depuis le bord droit
  Top: 10,       // Distance depuis le bord supérieur
  Bottom: 10     // Distance depuis le bord inférieur
);
```

### Propriétés de Taille

```
Anchor: (
  Width: 200,    // Largeur fixe
  Height: 100    // Hauteur fixe
);
```

### Propriétés Raccourcies

```
Anchor: (Full: 10);           // Tous les côtés = 10
Anchor: (Horizontal: 20);     // Gauche et Droite = 20
Anchor: (Vertical: 15);       // Haut et Bas = 15
```

### Exemple Combiné

```
// Taille fixe, positionné depuis le coin supérieur gauche
Anchor: (Left: 50, Top: 100, Width: 300, Height: 200);

// Remplit le parent avec des marges
Anchor: (Full: 16);

// Ancré au coin inférieur droit
Anchor: (Right: 20, Bottom: 20, Width: 100, Height: 40);

// Pleine largeur, hauteur fixe en bas
Anchor: (Horizontal: 0, Bottom: 0, Height: 50);
```

## Background

La propriété `Background` définit l'apparence du fond du widget.

### Couleur Unie

```
Background: (Color: #ff5500);
Background: (Color: #000000(0.5));    // Avec opacité
```

### Texture Simple

```
Background: "MyTexture.png";
Background: (TexturePath: "MyTexture.png");
```

### Texture 9-Patch (Étirable)

```
// Bordure uniforme
Background: (TexturePath: "Panel.png", Border: 20);

// Bordures horizontales/verticales séparées
Background: (
  TexturePath: "Button.png",
  HorizontalBorder: 80,
  VerticalBorder: 12
);
```

### Utiliser PatchStyle

```
@MyBackground = PatchStyle(
  TexturePath: "Panel.png",
  Border: 16
);

Group {
  Background: @MyBackground;
}
```

## Padding

La propriété `Padding` définit l'espacement intérieur.

```
Padding: (Full: 16);              // Tous les côtés
Padding: (Horizontal: 20);        // Gauche et Droite
Padding: (Vertical: 10);          // Haut et Bas
Padding: (Left: 10, Right: 20);   // Côtés individuels
Padding: (Top: 5, Bottom: 15, Horizontal: 10);
```

### Utiliser le Constructeur Padding

```
@ContentPadding = Padding(Full: 16, Top: 8);

Group {
  Padding: @ContentPadding;
}
```

## LayoutMode

La propriété `LayoutMode` contrôle l'arrangement des enfants.

### Modes d'Empilement

| Mode | Description |
|------|-------------|
| `Top` | Empile les enfants de haut en bas |
| `Bottom` | Empile les enfants de bas en haut |
| `Left` | Empile les enfants de gauche à droite |
| `Right` | Empile les enfants de droite à gauche |

```
Group {
  LayoutMode: Top;      // Liste verticale, alignée en haut

  Label { Text: "Premier"; Anchor: (Height: 30); }
  Label { Text: "Deuxième"; Anchor: (Height: 30); }
  Label { Text: "Troisième"; Anchor: (Height: 30); }
}
```

### Modes de Centrage

| Mode | Description |
|------|-------------|
| `Middle` | Centre les enfants verticalement |
| `CenterMiddle` | Centre les enfants horizontalement et verticalement |

```
Group {
  LayoutMode: CenterMiddle;

  Label { Text: "Centré !"; }
}
```

### Modes avec Défilement

| Mode | Description |
|------|-------------|
| `TopScrolling` | Défilement vertical, contenu depuis le haut |
| `BottomScrolling` | Défilement vertical, contenu depuis le bas (style chat) |

```
Group #ChatLog {
  LayoutMode: BottomScrolling;
  ScrollbarStyle: @DefaultScrollbarStyle;
  AutoScrollDown: true;
}
```

### Mode Retour à la Ligne

| Mode | Description |
|------|-------------|
| `LeftCenterWrap` | Flux gauche-droite, retour à la ligne suivante |

```
Group #ItemGrid {
  LayoutMode: LeftCenterWrap;

  // Les items passeront à la ligne suivante
}
```

## FlexWeight

La propriété `FlexWeight` contrôle le dimensionnement flexible dans la mise en page.

```
Group {
  LayoutMode: Left;

  Group {
    Anchor: (Width: 100);    // Largeur fixe
  }

  Group {
    FlexWeight: 1;           // Prend l'espace restant
  }

  Group {
    FlexWeight: 2;           // Prend 2x l'espace de FlexWeight: 1
  }
}
```

## Visible

Contrôle la visibilité du widget.

```
Group #Panel {
  Visible: true;    // ou false, ou @Variable
}

Button #CloseButton {
  Visible: @CloseButton;    // Contrôlé par paramètre de template
}
```

## Text

Définit le contenu texte pour les widgets Label et TextButton.

```
Label {
  Text: "Texte statique";
}

Label {
  Text: %server.ui.title;    // Clé de traduction
}

Label #DynamicText {
  Text: "";                  // Défini depuis Java
}
```

## ScrollbarStyle

Configure l'apparence de la scrollbar pour les conteneurs défilants.

```
Group {
  LayoutMode: TopScrolling;
  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)
  );
}
```

### Options ScrollbarStyle

| Propriété | Description |
|-----------|-------------|
| `Spacing` | Écart entre la scrollbar et le contenu |
| `Size` | Largeur/hauteur de la scrollbar |
| `Background` | Fond de la piste |
| `Handle` | Apparence normale de la poignée |
| `HoveredHandle` | Poignée au survol |
| `DraggedHandle` | Poignée pendant le glissement |
| `OnlyVisibleWhenHovered` | Masquer quand pas d'interaction |

## AutoScrollDown

Pour les conteneurs BottomScrolling, défile automatiquement vers le nouveau contenu.

```
Group #ChatLog {
  LayoutMode: BottomScrolling;
  AutoScrollDown: true;
}
```

## Disabled

Désactive l'interaction avec un widget.

```
Button #SubmitButton {
  Disabled: false;
}

ActionButton #Binding {
  Disabled: true;
}
```

## TooltipText

Affiche une infobulle au survol.

```
Button #InfoButton {
  TooltipText: %ui.tooltip.help;
}
```

## TextTooltipStyle

Configure l'apparence de l'infobulle.

```
Button {
  TooltipText: "Texte d'aide";
  TextTooltipStyle: (
    Background: (TexturePath: "TooltipBg.png", Border: 24),
    MaxWidth: 400,
    LabelStyle: (Wrap: true, FontSize: 16),
    Padding: 24
  );
}
```

## Combinaisons de Propriétés Courantes

### Panneau avec Titre et Contenu

```
Group #Panel {
  Anchor: (Width: 400, Height: 300);
  Background: (TexturePath: "Panel.png", Border: 20);
  LayoutMode: Top;
  Padding: (Full: 16);

  Label #Title {
    Anchor: (Height: 40);
    // ...
  }

  Group #Content {
    FlexWeight: 1;
    LayoutMode: TopScrolling;
    ScrollbarStyle: @DefaultScrollbarStyle;
    Padding: (Top: 8);
  }
}
```

### Rangée de Boutons Horizontale

```
Group #ButtonRow {
  Anchor: (Height: 50);
  LayoutMode: Right;
  Padding: (Horizontal: 10);

  TextButton #Cancel {
    Anchor: (Width: 100);
  }

  Group { Anchor: (Width: 10); }  // Espaceur

  TextButton #Confirm {
    Anchor: (Width: 100);
  }
}
```

### Overlay Plein Écran

```
Group #Overlay {
  Anchor: (Full: 0);
  Background: (Color: #000000(0.7));
  LayoutMode: CenterMiddle;

  Group #Dialog {
    Anchor: (Width: 500, Height: 300);
    Background: (TexturePath: "Dialog.png", Border: 20);
  }
}
```