# Layout, colours and buttons

> Expanding and fullscreen, swipes and closing confirmation, Lia's header and background colours, and the bottom, back and settings buttons. From the Lia developer docs: https://docs.lialabs.org/reference/sdk-layout

## The sheet and fullscreen

See [Three looks](/concepts/how-apps-run#three-looks) for `sheet`, `full` and `fullscreen`.

### Lia.expand()

As a sheet: takes the full height of the screen. Resolves with `{ expanded: true }` (also when it already was). Your page hears a `"viewport"` event with the new height.

### Lia.requestFullscreen()

Edge to edge, with only Lia's floating Close and ⋯ over your page. A sheet expands first. Resolves with `{ isFullscreen: true }`, and your page hears `"fullscreenChanged"` with the new `contentSafeArea`. Keep your content below `Lia.contentSafeArea.top`.

### Lia.exitFullscreen()

Back from fullscreen: to a sheet if your app opened as one, otherwise to the whole screen under Lia's header. Resolves with `{ isFullscreen: false }`.

### Lia.disableExpand()

As a sheet: keeps its height, so pulling it up no longer takes the whole screen. `Lia.expand()` still can. Resolves with `null`.

### Lia.enableExpand()

As a sheet: pulling it up takes the whole screen again (the default).

### Lia.disableVerticalSwipes()

As a sheet: a swipe down no longer closes it. Turn this off for games that use swipes. Resolves with `null`.

### Lia.enableVerticalSwipes()

As a sheet: a swipe down closes it again (the default).

## Closing

### Lia.enableClosingConfirmation()

Asks before closing, for unsaved work or a game under way: when the person closes your app with Close or from the ⋯ menu, Lia asks whether to leave first. A sheet can't be swiped closed while it's on. Resolves with `null`.

```js
Lia.enableClosingConfirmation(); // when a match starts
Lia.disableClosingConfirmation(); // when it ends
```

`Lia.close()` from your own page closes without asking.

### Lia.disableClosingConfirmation()

Closes without asking again (the default).

## Colours

### Lia.setBackgroundColor(color)

The colour behind your page, and behind the bottom buttons. Resolves with `null`.

| Parameter | Type | |
| --- | --- | --- |
| `color` | string | `#RRGGBB`, like `"#E9EEFF"`. |

Errors: `bad_color`.

### Lia.setHeaderColor(color)

The colour of Lia's header over your app. Its text and buttons turn light or dark to suit. Resolves with `null`. Errors: `bad_color`.

```js
Lia.setHeaderColor("#2F5BFF");
```

## Bottom buttons

### Lia.mainButton

A wide button under your page, in Lia blue unless you colour it, like Telegram's MainButton. `Lia.secondaryButton` is a second one beside or above it, white (or Lia's card colour) with blue text. Both are hidden until you show them.

```js
Lia.mainButton.setParams({ text: "Buy for 5 LIA", is_visible: true });
Lia.mainButton.onClick(async function () {
  Lia.mainButton.showProgress();
  try { await buy("extra-lives"); } finally { Lia.mainButton.hideProgress(); }
});
```

Every method returns the button, so calls chain: `Lia.mainButton.setText("Next").show()`.

| Method | What it does |
| --- | --- |
| `Lia.mainButton.setText(text)` | Its label, up to 64 characters. Throws `bad_text`. |
| `Lia.mainButton.setParams(params)` | Several at once (below). |
| `Lia.mainButton.show()` | Shows it. |
| `Lia.mainButton.hide()` | Hides it. |
| `Lia.mainButton.enable()` | Lets it be pressed. |
| `Lia.mainButton.disable()` | Greys it out. |
| `Lia.mainButton.showProgress(leaveActive)` | A spinner in place of its label. It's disabled while it spins, unless `leaveActive` is `true`. |
| `Lia.mainButton.hideProgress()` | Its label again, and enabled. |
| `Lia.mainButton.onClick(listener)` | Hears a press. |
| `Lia.mainButton.offClick(listener)` | Stops hearing it. |

`setParams` takes any of these (Telegram's names or camelCase):

| Param | Type | |
| --- | --- | --- |
| `text` | string | Up to 64 characters. |
| `color` | string or null | `#RRGGBB`, or `null` for Lia's. |
| `text_color` or `textColor` | string or null | `#RRGGBB`, or `null` for Lia's. |
| `is_visible` or `isVisible` | boolean | |
| `is_active` or `isActive` | boolean | |
| `has_shine_effect` or `hasShineEffect` | boolean | Accepted, but Lia doesn't draw a shine yet. |
| `position` | string | For the secondary button: where it sits next to the main one, `"left"` (the default), `"right"`, `"top"` or `"bottom"`. |

It throws `bad_text`, `bad_color`, `bad_text_color` or `bad_position` for values that don't fit.

The button's state, to read:

| Property | |
| --- | --- |
| `Lia.mainButton.type` | `"main"` or `"secondary"` |
| `Lia.mainButton.text` | Its label (`"Continue"` for the main button and `"Cancel"` for the secondary until you set one) |
| `Lia.mainButton.color`, `Lia.mainButton.textColor` | Your colours, or `null` |
| `Lia.mainButton.isVisible`, `Lia.mainButton.isActive` | |
| `Lia.mainButton.isProgressVisible` | Whether its spinner shows |
| `Lia.mainButton.hasShineEffect` | |
| `Lia.mainButton.position` | |

### Lia.secondaryButton

The second bottom button. The same methods and properties as `Lia.mainButton`; its presses are the `"secondaryButtonClicked"` event.

```js
Lia.secondaryButton.setParams({ text: "Skip", is_visible: true, position: "left" }).onClick(skip);
```

## Header buttons

### Lia.backButton

A back button at the start of Lia's header (in fullscreen, Lia's floating Close becomes a back button). Use it for your own screens: show it when the person goes one screen in, and go back when it's pressed. Lia doesn't navigate for you.

```js
function openDetail(item) {
  showDetail(item);
  Lia.backButton.show();
}
Lia.backButton.onClick(function () {
  showList();
  Lia.backButton.hide();
});
```

| Method or property | |
| --- | --- |
| `Lia.backButton.show()` | Shows it. Returns the button. |
| `Lia.backButton.hide()` | Hides it. |
| `Lia.backButton.onClick(listener)` | Hears a press (the `"backButtonClicked"` event). |
| `Lia.backButton.offClick(listener)` | Stops hearing it. |
| `Lia.backButton.isVisible` | Whether it's shown. |

While the back button shows in fullscreen, people close your app from the ⋯ menu.

### Lia.settingsButton

Adds Settings to your app's ⋯ menu. Pressing it is the `"settingsButtonClicked"` event. The same methods as `Lia.backButton`.

```js
Lia.settingsButton.show().onClick(openSettings);
```