Quick Menu

Description

<quick-menu></quick-menu>

The quick menu is the small toolbar at the bottom of the screen (top on mobile) that gives players quick access to common actions while playing. It renders one button per entry in its configuration, so you can add, remove and reorder buttons freely.

Default buttons

Out of the box the quick menu shows:

Button What it does Notes
Back Roll back to the previous statement Removed if AllowRollback is false.
Hide Hide the text box to admire the scene
Log Open the dialog log Added by the dialog-log component.
Auto Toggle auto-play
Skip Enter skip mode Removed if the Skip speed is 0.
Save Open the Save screen
Load Open the Load screen
Settings Open the Settings screen
Quit Quit to the main menu

NOTE

Two buttons are conditional: Skip only appears when the Skip setting is greater than 0, and Back only appears when AllowRollback is true.

A button definition

Each button is an object with these properties:

Key Description
string The translation key for the button’s label (see Translations).
icon A Font Awesome icon class, e.g. 'fas fa-tasks'.
data An object of data-* attributes. data.action is usually the action the button triggers.
element Optional. The tag to render (defaults to button).

Methods

The quick menu shares its button API with the Main Menu (both are menu components).

Add Button

static addButton ({ string, icon, data, ... }): void

Adds a button to the end of the menu.

monogatari.component ('quick-menu').addButton ({
    string: 'Stats',
    icon: 'fas fa-tasks',
    data: {
        action: 'show-stats'
    }
});

Add Button After

static addButtonAfter (after: string, { string, icon, data, ... }): void

Adds a button immediately after the one whose string matches after:

monogatari.component ('quick-menu').addButtonAfter ('Back', {
    string: 'Stats',
    icon: 'fas fa-tasks',
    data: { action: 'show-stats' }
});

Add Button Before

static addButtonBefore (before: string, { string, icon, data, ... }): void

Adds a button immediately before the one whose string matches before:

monogatari.component ('quick-menu').addButtonBefore ('Back', {
    string: 'Stats',
    icon: 'fas fa-tasks',
    data: { action: 'show-stats' }
});

Remove Button

static removeButton (string: string): void

Removes a button by its string. For example, to hide the Settings button:

monogatari.component ('quick-menu').removeButton ('Settings');

TIP

Your button's data.action needs something to respond to it. Pair a custom button with a Component or an event listener that reacts to that action — see HTML Data Attributes.

  • Main Menu — Shares the same button API.
  • Dialog Log — Adds the Log button to the quick menu.
  • Help Screen — Documents these buttons and their keyboard shortcuts for players.