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