mwg API
    Preparing search index...

    Class Button

    A clickable region with idle/hover/pressed/disabled states, a label, an icon, or both.

    Draws over the same NinePatch/theme machinery Window already draws its chrome from - a panel texture if the theme has one, a flat rounded rectangle otherwise - so a button looks like it belongs to the same interface without a game supplying separate art for it.

    icon alone (no text) is the icon-only button a title screen commonly reaches for - rankings, badges, settings - where a caption would only repeat what the icon already says. setIcon swaps the icon later, iconSelected gives a toggle its second icon, and tooltip carries the button's explanation for a TooltipHost.

    import { Button } from '@datamoc/mwg/two-d/ui';

    const start = new Button({
    	width: 160,
    	height: 32,
    	text: 'Start',
    	onClick: () => console.log('start pressed'),
    });

    start.setDisabled(true); // greys it out and stops pointer events
    console.log(start.disabled); // true

    Hierarchy

    • Container
      • Button
    Index
    constructor
    onClick onPress onRelease
    disabled selected tooltip
    destroy resize setColors setDisabled setIcon setSelected setSelectedIcon setText setTooltip
    onClick: Signal<void> = ...
    onPress: Signal<void> = ...
    onRelease: Signal<void> = ...
    • get tooltip(): string | undefined

      what a tooltip should say about this button right now, or undefined when it has none

      Returns string | undefined

    • Removes all internal references and listeners as well as removes children from the display list. Do not use a Container after calling destroy.

      Parameters

      • Optionaloptions: DestroyOptions

        Options parameter. A boolean will act as if all options have been set to that value

      Returns void

      container.destroy();
      container.destroy(true);
      container.destroy({ children: true });
      container.destroy({ children: true, texture: true, textureSource: true });

    • live-resize the button, for a caller whose own layout reflows on window resize rather than rebuilding buttons from scratch (Window's own constructor-only sizing is fine for a fixed dialog; a title screen's responsive row of buttons is not)

      Parameters

      • width: number
      • height: number

      Returns void

    • Replaces the icon (the old one is removed, not destroyed: icons are the caller's), keeping the layout. null removes it.

      Parameters

      • icon: Container<ContainerChild> | null

      Returns void

    • Marks the button as the active choice (the current tool, the open tab), drawn in the theme's color.selection - a toggle's look without a second widget.

      Parameters

      • selected: boolean

      Returns void

    • the icon a selected button shows instead, or null to use the one icon in both states

      Parameters

      • icon: Container<ContainerChild> | null

      Returns void

    • Parameters

      • tooltip: string | (() => string) | undefined

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods