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

riyad

视口​

负责 Telegram Mini Apps viewport 的💠组件。

安装​

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

Variable :

1. import { viewport } from '@telegram-apps/sdk';
   ! K* i3 U/ @( t  e
2. 
   
3. viewport.mount();
   
4. viewport.isMounted(); // true

复制代码

Functions :

1. import {
   & V2 B, {$ z  b2 Q# q1 ]5 r
2.   mountViewport,
   + z: H* y3 k1 @- M+ p2 r( f7 ^
3.   isViewportMounted,
   1 M& N4 X  }- Y; P$ y
4. } from '@telegram-apps/sdk';
   
5. 
   : X  R% H4 X8 V" C# n7 J6 e
6. mountViewport();
   
7. isViewportMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. viewport.unmount();
   ( }9 w' K# g0 h/ A# E  R: l' T* q4 V5 m
2. viewport.isMounted(); // false

复制代码

Functions :

1. import {
   
2.   unmountViewport,
   - |  D, w! ]) d
3.   isViewportMounted,
   
4. } from '@telegram-apps/sdk';
   
5. 
   , z! v& Z6 \4 {7 w2 o
6. unmountViewport();
   
7. isViewportMounted(); // false

复制代码

绑定 CSS 变量​

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

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

Variable :

1. viewport.bindCssVars();
   * ~8 {+ ?. h- e# @
2. // Creates CSS variables like:
   . y3 D- K! }1 |$ H, [$ a& N2 b
3. // --tg-viewport-height: 675px
   
4. // --tg-viewport-width: 320px
   1 G, `! r) t; u# D. J, i/ `; C: \
5. // --tg-viewport-stable-height: 675px
   
6. 
   
7. viewport.bindCssVars(key => `--my-prefix-${key}`);
   / R& o, F! l% L9 `$ p; t3 \2 Z
8. // Creates CSS variables like:
   
9. // --my-prefix-height: 675px
   
10. // --my-prefix-width: 320px
    2 ^7 F8 U, R3 o6 U1 ~# m
11. // --my-prefix-stableHeight: 675px
    
12. 
    
13. viewport.isCssVarsBound(); // true

复制代码

Functions ：

1. import {
   . o% M) `- ^+ A, ^+ g( v' F- ~
2.   bindViewportCssVars,
   
3.   isViewportCssVarsBound,
   $ H: j' ?1 B/ D7 z: P$ q
4. } from '@telegram-apps/sdk';
   
5. 
   
6. bindViewportCssVars();
   + t$ K! M5 h  ~: l" g
7. // Creates CSS variables like:
   # E# t. Q: ]8 `5 p0 A; i
8. // --tg-viewport-height: 675px
   
9. // --tg-viewport-width: 320px
   , c3 u4 T8 E: \! R3 F
10. // --tg-viewport-stable-height: 675px
    
11. 
    
12. bindViewportCssVars(key => `--my-prefix-${key}`);
    * \( z7 n" @& s& g( K8 X5 ]
13. // Creates CSS variables like:
    
14. // --my-prefix-height: 675px
    / s( B. e2 S: t' s3 E' N$ n2 `1 n2 R' I
15. // --my-prefix-width: 320px
    
16. // --my-prefix-stableHeight: 675px
    * ]4 `- O/ i6 b- @
17. 
    
18. isViewportCssVarsBound(); // true

复制代码

扩展​

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

Variable :

1. viewport.expand();

复制代码

Functions :

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

复制代码

1 Y6 e: q6 b' A3 r  W