Code Patterns

Copy-paste examples for common plugin tasks. Commands, events, ECS, GUI, and more.

All 225 Command 60 Damage 2 Ecs 27 Entity 5 Gui 75 Interaction 2 Inventory 4 Moderation 3 Permission 2 Player 9 Plugin 4 Storage 2 Teleport 3 Ui 22 Util 5

← Back to Patterns

ui-layout-modes

Understanding LayoutMode options for arranging child elements. Top = vertical stack, Left = horizontal row, Center = centered, Right = right-aligned. Combine with FlexWeight for responsive layouts.

Example Code

// LayoutMode: Top - Stack children vertically (default)
Group {
    LayoutMode: Top;

    Label { Text: "First"; }   // Top
    Label { Text: "Second"; }  // Below first
    Label { Text: "Third"; }   // Below second
}

// LayoutMode: Left - Arrange children horizontally
Group {
    LayoutMode: Left;

    Label { Text: "A"; }  // Left
    Label { Text: "B"; }  // Right of A
    Label { Text: "C"; }  // Right of B
}

// LayoutMode: Center - Center children
Group {
    LayoutMode: Center;
    Anchor: (Height: 50);

    TextButton { Text: "Centered Button"; Anchor: (Width: 200); }
}

// LayoutMode: Right - Align children to right
Group {
    LayoutMode: Right;
    Anchor: (Height: 50);

    TextButton { Text: "Right Button"; Anchor: (Width: 100); }
}

// FlexWeight for flexible sizing
Group {
    LayoutMode: Left;

    Group {
        Anchor: (Width: 100);  // Fixed 100px
        Background: #ff0000;
    }

    Group {
        FlexWeight: 1;  // Takes remaining space
        Background: #00ff00;
    }

    Group {
        FlexWeight: 2;  // Takes 2x the space of FlexWeight: 1
        Background: #0000ff;
    }
}

// Spacer pattern - push elements apart
Group {
    LayoutMode: Top;

    Label { Text: "Top content"; }

    Group { FlexWeight: 1; }  // Spacer - pushes next element to bottom

    TextButton { Text: "Bottom button"; }
}

Common Mistakes

Mixing Anchor fixed sizes with FlexWeight incorrectly - fixed Anchor overrides FlexWeight for that dimension