Telegram 小程序 | TypeScript @telegram-apps/sdk @2.x | 组件 | 视口

riyad

视口​

负责 Telegram Mini Apps viewport 的💠组件。

安装​

在使用该组件之前，有必要将其安装到正确配置的属性中。 为此，请使用 mount 方法。 它将更新 isMounted 信号属性。

Variable :

1. import { viewport } from '@telegram-apps/sdk';
   
2. 
   ' C* M5 S2 d& c1 Q" y2 M' S( I
3. viewport.mount();
   ( c, E! {4 S- f3 l7 f0 b& U
4. viewport.isMounted(); // true

复制代码

Functions :

1. import {
   
2.   mountViewport,
   
3.   isViewportMounted,
   9 S) b. V& N" @% f/ ~- e; d
4. } from '@telegram-apps/sdk';
   4 _- R) I, M! u7 Y  r# R! c+ Y) l9 X
5. 
   ( b' |! t/ ?6 ?( J
6. mountViewport();
   
7. isViewportMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. viewport.unmount();
   
2. viewport.isMounted(); // false

复制代码

Functions :

1. import {
   
2.   unmountViewport,
   4 L! E" [6 H" V  g8 H. Z! J
3.   isViewportMounted,
   
4. } from '@telegram-apps/sdk';
   
5. 
   . x/ p! U" g+ Q
6. unmountViewport();
   ( I7 m; {1 [. y
7. isViewportMounted(); // false

复制代码

绑定 CSS 变量​

要通过 CSS 变量公开 viewport 属性，请使用 bindCssVars 方法。 调用该方法后，isCssVarsBound 信号属性会被更新。

此方法可选择接受一个函数，该函数可将 width、height 和 stableHeight 的值转换为 CSS 变量名。 默认情况下，数值会通过 前缀 --tg-viewport- 转换为 kebab 大小写。

Variable :

1. viewport.bindCssVars();
   
2. // Creates CSS variables like:
   
3. // --tg-viewport-height: 675px
   1 q0 Z; Q6 V8 ?6 k5 n; @! L
4. // --tg-viewport-width: 320px
   ! }" r% q7 B$ E. \# u+ \8 h; v) {
5. // --tg-viewport-stable-height: 675px
   + d2 N7 A+ ?, R. z  c2 n
6. 
   0 g# p5 q" v( ~
7. viewport.bindCssVars(key => `--my-prefix-${key}`);
   
8. // Creates CSS variables like:
   ) N6 x4 ?7 w/ X) a# k% G: ?
9. // --my-prefix-height: 675px
   9 x$ {* k5 K/ h
10. // --my-prefix-width: 320px
    
11. // --my-prefix-stableHeight: 675px
    
12. 
    
13. viewport.isCssVarsBound(); // true

复制代码

Functions ：

1. import {
   
2.   bindViewportCssVars,
   
3.   isViewportCssVarsBound,
   
4. } from '@telegram-apps/sdk';
   
5. 
   ' o% u: w% C4 g  c
6. bindViewportCssVars();
   
7. // Creates CSS variables like:
   % B4 z: o) ~: S, o
8. // --tg-viewport-height: 675px
   
9. // --tg-viewport-width: 320px
   
10. // --tg-viewport-stable-height: 675px
    5 b& N0 U" D- K+ C
11. 
    + Z& }% K5 U7 `6 z# R% |- c# ^
12. bindViewportCssVars(key => `--my-prefix-${key}`);
    
13. // Creates CSS variables like:
    
14. // --my-prefix-height: 675px
    ( U; I9 \8 ?: l5 H
15. // --my-prefix-width: 320px
    , L& A0 T: r7 y2 F
16. // --my-prefix-stableHeight: 675px
    
17. 
    2 T6 j4 X6 N8 e8 T. n" ^" D
18. isViewportCssVarsBound(); // true

复制代码

扩展​

要扩展视口，请使用 expand 方法。

Variable :

1. viewport.expand();

复制代码

Functions :

1. import { expandViewport } from '@telegram-apps/sdk';
   
2. 
   
3. expandViewport();

复制代码

6 n% ^' K* z. _. h. i; ]0 E