← Easy UI
Component Reference
All ~39 Easy UI components, grouped by area – with tag, key attributes
and a UXML example. The manifest is always authoritative
(Assets/EasyUI/AI/easyui.manifest.json); do not invent classes or attributes that aren't listed there.
i
Every component is authorable in UXML and C#. Enum values are written as the member name
(e.g. variant="Primary"). Some components need an additional stylesheet – see
Stylesheets.
Layout & Container
| Tag | Purpose | Key attributes |
|---|
EuiRoot | Token host & topmost element of every hierarchy; sets breakpoint classes. | breakpoint-small, breakpoint-medium, auto-focus |
EuiPanel | Styled surface / container. | – |
EuiCard | Card with an optional title header; children go into the content. | title |
EuiModal | Dimmed backdrop with a centered card. | title, open, close-on-backdrop |
EuiAccordionItem | Collapsible section with a header. | title, expanded |
EuiScrollView | Styled scroll view (give it a fixed height). | – |
EuiSafeArea | Insets content around the device safe area (notches). Wrap your HUD in this. | – |
| Tag | Purpose | Key attributes |
|---|
EuiButton | Button in 4 variants, 3 sizes. | text, variant (Primary/Secondary/Ghost/Danger), size (Small/Medium/Large) |
EuiToggle | Switch (INotifyValueChanged<bool>). | label, value |
EuiSlider | Value slider. | low-value, high-value, value |
EuiStepper | Numeric +/- stepper. | value, min, max, step |
EuiTextField | Text field with label. | label, value |
EuiDropdown | Selection dropdown. | label, options (CSV) |
EuiRatingStars | Star rating. | value, max |
EuiSegmentedControl | Segmented toggle. | items (CSV), value (index) |
EuiColorPicker | Color selection from swatches. | colors (CSV hex), value (index) |
Example
<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 | Purpose | Key attributes |
|---|
EuiProgressBar | Bar with a color role (e.g. red HP, blue mana). | value (0..1), label, tone (Primary/Danger/Success/Warning/Info) |
EuiToast | Notification banner; at runtime via EuiToast.Show(root, msg, tone). | text, tone (Info/Success/Warning/Danger) |
EuiSpinner | Rotating loading spinner (Painter2D). | thickness, fill-token |
EuiChip | Tag/chip with an optional remove button. | text, closable, tone |
EuiBadge | Small status label. | text, tone (Primary/Danger/Muted/Success/Warning/Info) |
EuiSkeleton | Loading placeholder. | lines, avatar |
EuiAvatar | Round avatar with initials. | initials |
Navigation & Data
| Tag | Purpose | Key attributes |
|---|
EuiTabs | Tabs (INotifyValueChanged<int>). | tabs (CSV), value |
EuiBreadcrumb | Path navigation. | items (CSV), separator |
EuiPagination | Page navigation. | pages, value (1-based) |
EuiDataTable / EuiDataRow | Table; rows as children, columns share the width. | Table: columns (CSV) · Row: cells (CSV) |
EuiCalendar | Month calendar with selection. | month, days, start, today, value |
Example
<eui:EuiDataTable columns="Name,Level,Gold">
<eui:EuiDataRow cells="Nova,42,1240" />
<eui:EuiDataRow cells="Rok,37,860" />
</eui:EuiDataTable>
Game UI
| Tag | Purpose | Key attributes |
|---|
EuiDialogueBox | Dialogue box with speaker, text, portrait, continue hint. | speaker, text, hint, show-portrait |
EuiCurrency | Currency display with icon. | icon, amount, tone (Gold/Gem/Neutral) |
EuiLeaderboard / EuiLeaderboardRow | Leaderboard; rows as children. | Row: rank, player, score, highlight |
EuiAbilityButton | Ability slot with hotkey & cooldown sweep. | icon, hotkey, cooldown (0..1), cooldown-text |
EuiQuestLog / EuiQuestEntry | Quest list; entries as children. | Entry: title, objective, progress, done |
EuiItemSlot | Inventory/hotbar slot (icon via background-image). | icon, count, selected |
Example
<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 | Purpose | Key attributes |
|---|
EuiJoystick | Virtual touch joystick; value normalized (-1..1, y-up). | return-to-center |
EuiDPad | Four-way D-pad; value = pressed direction. | – |
EuiRadialProgress | Circular ring for cooldowns/timers (Painter2D). | value (0..1), thickness, fill-token |
EuiRadialMenu | Radial menu / weapon wheel (Painter2D). | items (CSV), value, fill-token |
Shapes & Text
EuiShape draws crisp panels, rings and badges procedurally (Painter2D) – without importing sprites.
It has no intrinsic size: always set width/height. For theme-consistent colors,
use fill-token/border-token/shadow-token instead of literal colors (requires an EuiRoot ancestor).
| Tag | Purpose | Key attributes |
|---|
EuiShape | Procedural surface with gradient, border, soft shadow. | fill-token, corner-radius, use-gradient, gradient-angle, border-width, shadow-* |
EuiLocalizedLabel | Label whose text comes from a localization key. | key |
Example
<eui:EuiShape style="width:170px; height:110px;" fill-token="primary" corner-radius="20" />
Stylesheets
Always loaded: EasyUI.Tokens.uss, EasyUI.Core.uss, EasyUI.Button.uss, EasyUI.Controls.uss. Additionally, depending on the component:
| Stylesheet | Required for |
|---|
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 | Anchor, responsive, focus and state helper classes |
✓
The Screen Wizard and the UxmlWriter helpers wire up the matching ComponentSheets automatically –
when building manually, follow the list above.
