Init
This commit is contained in:
393
content/ui-systems/ui-widgets.fr.md
Normal file
393
content/ui-systems/ui-widgets.fr.md
Normal file
@@ -0,0 +1,393 @@
|
||||
---
|
||||
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 |
|
||||
Reference in New Issue
Block a user