0
# UI & Display Control
1
2
User interface management including view settings, window resizing, scrolling, appearance control, and display-related functionality.
3
4
## Capabilities
5
6
### View Settings
7
8
Control appearance, status bar style, and color scheme of the Mini App interface.
9
10
```typescript { .api }
11
/**
12
* Set view appearance and status bar styling
13
* @param props.status_bar_style - Status bar appearance (light/dark)
14
* @param props.action_bar_color - Action bar color (optional)
15
* @param props.navigation_bar_color - Navigation bar color (optional)
16
*/
17
function send(method: 'VKWebAppSetViewSettings', props: {
18
status_bar_style: AppearanceType;
19
action_bar_color?: 'none' | string;
20
navigation_bar_color?: string;
21
}): Promise<{ result: true }>;
22
23
type AppearanceType = 'light' | 'dark';
24
```
25
26
### Window Management
27
28
Resize application window (desktop only) and manage viewport dimensions.
29
30
```typescript { .api }
31
/**
32
* Resize application window (desktop web only)
33
* @param props.width - New window width
34
* @param props.height - New window height (optional)
35
*/
36
function send(method: 'VKWebAppResizeWindow', props: {
37
width: number;
38
height?: number;
39
}): Promise<{ width: number; height: number }>;
40
```
41
42
### Image Display
43
44
Show image gallery with navigation and zoom capabilities.
45
46
```typescript { .api }
47
/**
48
* Show image gallery
49
* @param props.images - Array of image URLs
50
* @param props.start_index - Starting image index (optional)
51
*/
52
function send(method: 'VKWebAppShowImages', props: {
53
images: string[];
54
start_index?: number;
55
}): Promise<{ result: true }>;
56
```
57
58
### Scrolling Control
59
60
Control page scrolling position and behavior.
61
62
```typescript { .api }
63
/**
64
* Scroll to specific position
65
* @param props.top - Scroll position from top
66
* @param props.speed - Scroll animation speed (optional)
67
*/
68
function send(method: 'VKWebAppScroll', props: {
69
top: number;
70
speed?: number;
71
}): Promise<{ top: number; height: number }>;
72
```