← Easy UI
Komponenten-Referenz
Alle rund 39 Komponenten von Easy UI, nach Bereich gruppiert – mit Tag, wichtigen Attributen
und einem UXML-Beispiel. Maßgeblich ist immer das Manifest
(Assets/EasyUI/AI/easyui.manifest.json); erfinde keine Klassen oder Attribute, die dort nicht stehen.
i
Jede Komponente ist in UXML und C# autorierbar. Enum-Werte werden als Member-Name geschrieben
(z. B. variant="Primary"). Manche Komponenten brauchen ein zusätzliches Stylesheet – siehe
Stylesheets.
Layout & Container
| Tag | Zweck | Wichtige Attribute |
|---|
EuiRoot | Token-Host & oberstes Element jeder Hierarchie; setzt Breakpoint-Klassen. | breakpoint-small, breakpoint-medium, auto-focus |
EuiPanel | Gestylte Fläche / Container. | – |
EuiCard | Karte mit optionalem Titel-Header; Kinder gehen in den Content. | title |
EuiModal | Abgedunkelter Backdrop mit zentrierter Karte. | title, open, close-on-backdrop |
EuiAccordionItem | Aufklappbarer Bereich mit Header. | title, expanded |
EuiScrollView | Gestylte Scroll-Ansicht (feste Höhe geben). | – |
EuiSafeArea | Setzt Content um die Geräte-Safe-Area ein (Notches). HUD hier einwickeln. | – |
| Tag | Zweck | Wichtige Attribute |
|---|
EuiButton | Button in 4 Varianten, 3 Größen. | text, variant (Primary/Secondary/Ghost/Danger), size (Small/Medium/Large) |
EuiToggle | Schalter (INotifyValueChanged<bool>). | label, value |
EuiSlider | Werteschieber. | low-value, high-value, value |
EuiStepper | Numerischer +/- Stepper. | value, min, max, step |
EuiTextField | Textfeld mit Label. | label, value |
EuiDropdown | Auswahl-Dropdown. | label, options (CSV) |
EuiRatingStars | Sterne-Bewertung. | value, max |
EuiSegmentedControl | Segment-Umschalter. | items (CSV), value (Index) |
EuiColorPicker | Farbfeld-Auswahl aus Swatches. | colors (CSV Hex), value (Index) |
Beispiel
<eui:EuiButton text="Play" variant="Primary" size="Large" />
<eui:EuiDropdown label="Quality" options="Low, Medium, High" />
<eui:EuiSegmentedControl items="Day,Week,Month" value="1" />
Feedback & Status
| Tag | Zweck | Wichtige Attribute |
|---|
EuiProgressBar | Balken mit Farb-Rolle (z. B. rote HP, blaue Mana). | value (0..1), label, tone (Primary/Danger/Success/Warning/Info) |
EuiToast | Hinweis-Banner; zur Laufzeit via EuiToast.Show(root, msg, tone). | text, tone (Info/Success/Warning/Danger) |
EuiSpinner | Rotierender Ladespinner (Painter2D). | thickness, fill-token |
EuiChip | Tag/Chip mit optionalem Entfernen-Button. | text, closable, tone |
EuiBadge | Kleines Status-Label. | text, tone (Primary/Danger/Muted/Success/Warning/Info) |
EuiSkeleton | Lade-Platzhalter. | lines, avatar |
EuiAvatar | Runder Avatar mit Initialen. | initials |
Navigation & Daten
| Tag | Zweck | Wichtige Attribute |
|---|
EuiTabs | Reiter (INotifyValueChanged<int>). | tabs (CSV), value |
EuiBreadcrumb | Pfad-Navigation. | items (CSV), separator |
EuiPagination | Seiten-Blätterung. | pages, value (1-basiert) |
EuiDataTable / EuiDataRow | Tabelle; Zeilen als Kinder, Spalten teilen Breite. | Table: columns (CSV) · Row: cells (CSV) |
EuiCalendar | Monatskalender mit Auswahl. | month, days, start, today, value |
Beispiel
<eui:EuiDataTable columns="Name,Level,Gold">
<eui:EuiDataRow cells="Nova,42,1240" />
<eui:EuiDataRow cells="Rok,37,860" />
</eui:EuiDataTable>
Game-UI
| Tag | Zweck | Wichtige Attribute |
|---|
EuiDialogueBox | Dialogbox mit Sprecher, Text, Portrait, Weiter-Hinweis. | speaker, text, hint, show-portrait |
EuiCurrency | Währungsanzeige mit Icon. | icon, amount, tone (Gold/Gem/Neutral) |
EuiLeaderboard / EuiLeaderboardRow | Bestenliste; Zeilen als Kinder. | Row: rank, player, score, highlight |
EuiAbilityButton | Fähigkeiten-Slot mit Hotkey & Cooldown-Wisch. | icon, hotkey, cooldown (0..1), cooldown-text |
EuiQuestLog / EuiQuestEntry | Questliste; Einträge als Kinder. | Entry: title, objective, progress, done |
EuiItemSlot | Inventar-/Hotbar-Slot (Icon via background-image). | icon, count, selected |
Beispiel
<eui:EuiDialogueBox speaker="Nova" text="We shouldn't be here."
hint="Space" show-portrait="true" />
<eui:EuiAbilityButton icon="🔥" hotkey="Q" cooldown="0.4" cooldown-text="3" />
Game-Controls
| Tag | Zweck | Wichtige Attribute |
|---|
EuiJoystick | Virtueller Touch-Joystick; value normalisiert (-1..1, y-up). | return-to-center |
EuiDPad | Vier-Wege-Steuerkreuz; value = gedrückte Richtung. | – |
EuiRadialProgress | Kreisring für Cooldowns/Timer (Painter2D). | value (0..1), thickness, fill-token |
EuiRadialMenu | Radialmenü / Weapon-Wheel (Painter2D). | items (CSV), value, fill-token |
Shapes & Text
EuiShape zeichnet gestochene Panels, Ringe und Badges prozedural (Painter2D) – ohne Sprite-Import.
Sie hat keine intrinsische Größe: immer width/height setzen. Für theme-treue Farben
fill-token/border-token/shadow-token statt Literalfarben nutzen (braucht einen EuiRoot-Vorfahren).
| Tag | Zweck | Wichtige Attribute |
|---|
EuiShape | Prozedurale Fläche mit Gradient, Rand, weichem Schatten. | fill-token, corner-radius, use-gradient, gradient-angle, border-width, shadow-* |
EuiLocalizedLabel | Label, dessen Text aus einem Localization-Key kommt. | key |
Beispiel
<eui:EuiShape style="width:170px; height:110px;" fill-token="primary" corner-radius="20" />
Stylesheets
Immer geladen: EasyUI.Tokens.uss, EasyUI.Core.uss, EasyUI.Button.uss, EasyUI.Controls.uss. Zusätzlich je nach Komponente:
| Stylesheet | Benötigt für |
|---|
EasyUI.GameControls.uss | EuiJoystick, EuiRadialProgress, EuiTabs, EuiRadialMenu |
EasyUI.Widgets.uss | EuiModal, EuiDPad, EuiBadge |
EasyUI.Content.uss | EuiItemSlot, EuiScrollView, .eui-grid/.eui-row |
EasyUI.Feedback.uss | EuiToast, EuiSpinner, EuiChip, EuiAvatar |
EasyUI.GameUI.uss | EuiDialogueBox, EuiCurrency, EuiLeaderboard, EuiAbilityButton, EuiQuestLog |
EasyUI.General.uss | EuiSegmentedControl, EuiBreadcrumb, EuiPagination, EuiSkeleton, EuiDataTable, EuiCalendar, EuiColorPicker |
EasyUI.Anchors / .Responsive / .Focus / .States | Anker-, Responsive-, Fokus- und Zustands-Hilfsklassen |
✓
Der Screen-Wizard und die UxmlWriter-Hilfen binden die passenden ComponentSheets automatisch ein –
beim manuellen Aufbau die Liste oben beachten.
