Widget Catalog

All widgets by group and the most used components.

Group	Widgets
Basics	Panel, Label, Button, ImageButton, Icon, Image, AnimatedImage (GIF), FancyText
Input	TextField, NumberField, ColorField, Slider, SliderField, Toggle, Checkbox, RadioGroup, Select, KeyBindField, DatePicker, CalendarView, ColorPicker
Forms	Form, FormField, Validator, Wizard, Stepper
Navigation	Tabs, SideNav, Pages, Paginator, Collapsible, ScrollPanel
Popups	ContextMenu, Tooltip / Tooltips, RadialMenu, Window (drag, resize, modal)
Data	Table, TreeView, VirtualList, DataView, Chart (line, area, bar, pie)
Indicators	ProgressBar, RingProgress, Spinner, Skeleton
Text	Markdown, Book, SyntaxHighlighter
Game	Slot, SlotGrid, SlotGroup, InventoryPanel, EntityView, ItemView, BlockMap, BlockModel, StructurePreview, MiniMap, WorldMap
Decoration	Backdrop (live wallpapers), FxLayer (effects), ThemeEditor, LanguageButton
HUD	Hud, SegmentedBar, RadialGauge, BossBar, TimerDisplay, Toast, NotificationFeed

Color picker and ring progress

• ColorPicker: a saturation/brightness square, a hue bar and an alpha bar; works from the keyboard; the value is stored in a Signal<Integer>.
• RingProgress: a circular indicator with a gradient arc and a percentage in the middle, or an endless spinner (.spinner()).

Text with effects (FancyText) draws a string character by character with the regular game font:

new FancyText("Lumina UI").scale(2).gradient(0xFFFF8A00, 0xFFE52E71).flow(0.4f).outline(0xFF000000);
new FancyText("Rainbow").rainbow().wave(2f, 6f);        // rainbow and wave (amplitude, speed)
new FancyText("Shake!").shake(0.8f);
new FancyText("Hello!").typewriter(24f).typeSound("minecraft:ui.button.click").onTyped(this::next);

Table (Table<T>): columns with width weights, sorting by clicking a header, row selection, zebra stripes, long text truncated with an ellipsis. You can draw a cell yourself (icon, bar):

Table<Ore> t = new Table<Ore>()
        .column("Ore", 2, Ore::name)
        .column("Mined", 1, o -> String.valueOf(o.count()), Comparator.comparingInt(Ore::count))
        .column("Chance", 1, (canvas, ore, x, y, w, h) -> canvas.fillRect(x, y + 5, w * ore.chance(), 6, 0xFF5B8CFF), null)
        .rows(ores);
t.selection().subscribe(o -> show(o));

Tree (TreeView): nodes with item icons, expanded by the arrow, a double click or the keyboard. TreeView.node("World", "minecraft:grass_block").add(node("Nether"), ...), selection(), onSelect(...).

Charts (Chart): LINE, AREA, BAR, PIE, DONUT. Values grow in on appearance, values(series, ...) changes them smoothly, hovering shows a tooltip.

new Chart(Chart.Kind.BAR).labels("Mon", "Tue", "Wed").series("Stone", 0xFF8AB4F8, 120, 180, 90).unit(" pcs");

Loading: Spinner (RING, DOTS, BARS, PULSE) and Skeleton (line(w), fullLine(), circle(d)) with a moving shine.

Windows (Window): placed absolutely inside any container (at(x, y)), dragged by the title bar, resized by the corner; a click brings the window to the front (UiElement.bringToFront()), Esc and the close button close it with an animation. modal(true) dims everything below the window and blocks clicks.

Live wallpapers (Backdrop): AURORA, STARS, WAVES, FLOW, GRID; colors(...), speed(...), parallax(pixels) makes the layers follow the mouse. Put them as the first layer in a StackLayout; they don't capture the mouse.

Texture frame (NineSlice): corners don't stretch, edges and the middle do.

panel.style(b -> b.set(Styles.NINE_SLICE, NineSlice.of("minecraft:textures/gui/demo_background.png", 248, 166, 4).inFile(256, 256).scaled(2)));

In CSS: nine-slice: url(minecraft:textures/gui/demo_background.png) 248 166 4 in 256 256 / 2 (the border as 1 or 4 numbers; after in the size of the whole file if the frame sits in its corner, like vanilla 256×256 images; after / the scale).

Pages with transitions (Pages): shows one page by the number from a signal, handy together with Tabs and SideNav. Effects FADE, SLIDE (in the direction of the change), SLIDE_UP, ZOOM, FLIP; a page is created on first show and kept by default (keepAlive).

Signal<Integer> tab = Signal.of(0);
new Tabs(tab, "Screen", "View");
new Pages(tab).effect(Pages.Effect.SLIDE).page(this::screen).page(this::view);

A ready-made modern settings screen is the "Modern style" section of the showcase (ModernPage).

---

← Events and Input · English home · Popups →