Telegram 小程序 | TypeScript @telegram-apps/sdk @2.x | 组件 | 主按钮

riyad

主按钮​

负责 Telegram Mini Apps main button 的💠组件。

安装​

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

Variable :

1. import { mainButton } from '@telegram-apps/sdk';
   
2. 
   
3. mainButton.mount();
   
4. mainButton.isMounted(); // true

复制代码

Functions :

1. import { mountMainButton, isMainButtonMounted } from '@telegram-apps/sdk';
   
2. 
   
3. mountMainButton();
   
4. isMainButtonMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. mainButton.unmount();
   8 l6 p5 W, X7 f& j
2. mainButton.isMounted(); // false

复制代码

Functions :

1. import { unmountMainButton, isMainButtonMounted } from '@telegram-apps/sdk';
   - ^6 e# ?7 V  l5 L8 L, {
2. 
   
3. unmountMainButton();
   
4. isMainButtonMounted(); // false

复制代码

WARNING

该组件的属性取决于 主题参数 组件中的值。 使用主按钮前，请务必安装主题参数。

设置属性​

要更新按钮属性，请使用 setParams 方法。 它接受一个带有可选 属性的对象，每个属性负责各自的按钮特性。

反过来，调用该方法会更新 ，如 backgroundColor, hasShineEffect, isVisible, isEnabled, isLoaderVisible, state, textColor 和 text。

Variable :

1. mainButton.setParams({
   - O" f% M, S" G  U$ t* g
2.   backgroundColor: '#000000',
   . o+ n3 V# h, L1 x9 b# t% w
3.   hasShineEffect: true,
   
4.   isEnabled: true,
   
5.   isLoaderVisible: true,
   
6.   isVisible: true,
   
7.   text: 'My text',
   ( e% [9 S8 U: _( e$ F% g8 j: F
8.   textColor: '#ffffff'
   
9. });
   % `" d6 ]% h3 z! Q
10. mainButton.backgroundColor(); // '#000000'
    
11. mainButton.hasShineEffect(); // true
    
12. mainButton.isEnabled(); // true
    ; ^( m1 P4 o0 I
13. mainButton.isLoaderVisible(); // true
    7 ^% R: U* p6 b- C  U. Q
14. mainButton.isVisible(); // true
    ( l+ n  ^6 z7 L. l9 \3 C
15. mainButton.text(); // 'My text'
    
16. mainButton.textColor(); // '#ffffff'
    2 w" i3 Q+ g. j
17. 
    # e0 S4 m& {2 A" n  [$ ?' [  Q0 A) [
18. mainButton.state();
    
19. // {
    
20. //   backgroundColor: '#000000',
    
21. //   hasShineEffect: true,
      G- t7 `4 ^* x8 X  W
22. //   isActive: true,
    
23. //   isLoaderVisible: true,
    
24. //   isVisible: true,
    
25. //   text: 'My text',
    
26. //   textColor: '#ffffff'
    . b7 {0 p$ W# @: T2 {; h) h
27. // }

复制代码

Functions :

1. import {
   " l/ u) g' k$ @% \5 {: t
2.   setMainButtonParams,
   
3.   mainButtonBackgroundColor,
     O) Y6 [0 x3 X" Q4 M9 ~# _3 q
4.   mainButtonHasShineEffect,
   " D0 Q4 ~3 X4 u% Z$ H8 ^- Z
5.   isMainButtonVisible,
   $ \9 p' {! |( d& V
6.   isMainButtonEnabled,
   
7.   isMainButtonLoaderVisible,
   
8.   mainButtonState,
   
9.   mainButtonTextColor,
   0 R" b5 O0 B1 x( Z/ @  }
10.   mainButtonText,
    
11. } from '@telegram-apps/sdk';
    
12. 
    # n$ ?0 d/ w  f; Q
13. setMainButtonParams({
    
14.   backgroundColor: '#000000',
    
15.   hasShineEffect: true,
    ; V1 }5 r9 l, n, {
16.   isEnabled: true,
    . y" o* X! s9 u- z0 b: z0 V
17.   isLoaderVisible: true,
    % z5 O# t6 n' t6 P. _4 \/ ]2 B
18.   isVisible: true,
    
19.   text: 'My text',
      r2 u, l! P' x8 B% U* `% A, k
20.   textColor: '#ffffff'
    . N- C* f: Z0 T% \/ F8 G; Q; p
21. });
    
22. mainButtonBackgroundColor(); // '#000000'
    
23. mainButtonHasShineEffect(); // true
    + T9 z( d/ r  u( `4 v  ]
24. isMainButtonEnabled(); // true
    , o9 `+ _: z) ]
25. isMainButtonLoaderVisible(); // true
    
26. isMainButtonVisible(); // true
    
27. mainButtonText(); // 'My text'
    
28. mainButtonTextColor(); // '#ffffff'
    ! C* ~$ o) S5 G9 s3 S( J0 o( R
29. 
    - a! Q3 h5 r6 Q) t
30. mainButtonState();
    
31. // {
    $ `& I0 H" Q/ Z$ O) O9 _0 n
32. //   backgroundColor: '#000000',
    2 A9 `/ B) n* |- B0 [) x, T# D
33. //   hasShineEffect: true,
    
34. //   isActive: true,
    0 K  k4 f# Q- o
35. //   isLoaderVisible: true,
    * d+ f- }, X4 c
36. //   isVisible: true,
    % P) `. a( @5 T; _3 o
37. //   text: 'My text',
    
38. //   textColor: '#ffffff'
    
39. // }

复制代码

跟踪点击​

要添加按钮点击监听器，请使用 onClick 方法。 它返回一个函数，用于移除绑定的 监听器。 或者，您也可以使用 offClick 方法。

Variable :

1. function listener() {
   . W1 M- A2 O7 B& W
2.   console.log('Clicked!');
   : F% Q0 E4 K* d3 m0 j1 N# y: [( H4 h) s
3. }
   : u- u; [( U9 p( `5 ~
4. 
   + b* {1 k: k" ]% f2 M
5. const offClick = mainButton.onClick(listener);
   
6. offClick();
   0 M9 F1 e- H- S$ ]' u. O: y
7. // or
   
8. mainButton.onClick(listener);
   
9. mainButton.offClick(listener);

复制代码

Functions :

1. import {
   
2.   onMainButtonClick,
   0 y2 p) M& h+ p1 w& q' ^. d
3.   offMainButtonClick,
   
4. } from '@telegram-apps/sdk';
   
5. 
   ) Q& Y9 R; D$ c9 D9 z' Q- g
6. function listener() {
   
7.   console.log('Clicked!');
   & P& o. A- i/ u* j. ~
8. }
   
9. 
   
10. const offClick = onMainButtonClick(listener);
    
11. offClick();
    
12. // or
    ( w# Y# J3 w$ t. J$ K5 i! d4 @9 O
13. onMainButtonClick(listener);
    9 p* ]7 v+ a/ p) C/ k2 A
14. offMainButtonClick(listener);

复制代码

7 ?' |7 N3 Q" d, \