Documentation/content/ui-systems/ui-properties.fr.md

title, type, weight

title	type	weight
Propriétés UI	docs	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);
  }
}