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

riyad

视口​

负责 Telegram Mini Apps viewport 的💠组件。

安装​

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

Variable :

1. import { viewport } from '@telegram-apps/sdk';
   
2. 
   4 s, v( w% @3 ^: n  I, z2 t$ \9 x
3. viewport.mount();
   
4. viewport.isMounted(); // true

复制代码

Functions :

1. import {
   
2.   mountViewport,
   9 E4 b! P% A8 q( \
3.   isViewportMounted,
   
4. } from '@telegram-apps/sdk';
   
5. 
   
6. mountViewport();
   7 g" `: M/ y6 F! h( {* B  X) a2 P
7. isViewportMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. viewport.unmount();
   / {5 \0 O, g: q* B" j% g
2. viewport.isMounted(); // false

复制代码

Functions :

1. import {
   ! [" }) w% S* _4 [: ^  J9 S2 E, Z
2.   unmountViewport,
   
3.   isViewportMounted,
   7 n- H* v( V2 @  \, t" W4 C( F3 R
4. } from '@telegram-apps/sdk';
   
5. 
   / g: t" j# D$ m7 K) c, v2 Q( D" B
6. unmountViewport();
   $ \6 J! |3 D5 K; l7 U) a+ q8 a
7. isViewportMounted(); // false

复制代码

绑定 CSS 变量​

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

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

Variable :

1. viewport.bindCssVars();
   6 b4 O" L) J7 J( Y6 g
2. // Creates CSS variables like:
   0 K1 g, x5 K. ^8 R
3. // --tg-viewport-height: 675px
   % w' q$ d2 {  G3 S) l7 n9 G
4. // --tg-viewport-width: 320px
   
5. // --tg-viewport-stable-height: 675px
   % K( y; N. [: k0 D
6. 
     R: z* c, p7 W, s2 L8 ]# c
7. viewport.bindCssVars(key => `--my-prefix-${key}`);
   
8. // Creates CSS variables like:
     g2 G2 D3 Q& I+ c
9. // --my-prefix-height: 675px
   
10. // --my-prefix-width: 320px
    
11. // --my-prefix-stableHeight: 675px
    
12. 
    8 Z' M; V) `* S1 S' k( M3 |8 [
13. viewport.isCssVarsBound(); // true

复制代码

Functions ：

1. import {
   - H- Y: c! O% A
2.   bindViewportCssVars,
   
3.   isViewportCssVarsBound,
   
4. } from '@telegram-apps/sdk';
   
5. 
   6 @, h5 Z, z- X" V' U& s
6. bindViewportCssVars();
   
7. // Creates CSS variables like:
   , e. b7 Z. Y  l' i: c4 ^8 u0 e
8. // --tg-viewport-height: 675px
   
9. // --tg-viewport-width: 320px
   
10. // --tg-viewport-stable-height: 675px
    
11. 
    
12. bindViewportCssVars(key => `--my-prefix-${key}`);
    0 a& v- ^( O; N6 ?( j! a
13. // Creates CSS variables like:
    
14. // --my-prefix-height: 675px
    , I; v; x$ m: M. a
15. // --my-prefix-width: 320px
    
16. // --my-prefix-stableHeight: 675px
    ! _8 I6 {6 L1 U' Z" [, l# m7 a
17. 
    
18. isViewportCssVarsBound(); // true

复制代码

扩展​

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

Variable :

1. viewport.expand();

复制代码

Functions :

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

复制代码

6 B! m: y6 U. i6 E/ E- H( q1 ~
  c6 K/ g; N. f7 ?5 A