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();
   6 v0 y3 P. A; C. V
4. mainButton.isMounted(); // true

复制代码

Functions :

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

复制代码

要卸载，请使用 unmount 方法：

Variable :

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

复制代码

Functions :

1. import { unmountMainButton, isMainButtonMounted } from '@telegram-apps/sdk';
   3 z5 x/ n8 e' {. b
2. 
   
3. unmountMainButton();
   
4. isMainButtonMounted(); // false

复制代码

WARNING

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

设置属性​

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

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

Variable :

1. mainButton.setParams({
   
2.   backgroundColor: '#000000',
   
3.   hasShineEffect: true,
   
4.   isEnabled: true,
   7 f2 I1 n. k+ ]& |" A4 l6 x0 I
5.   isLoaderVisible: true,
   
6.   isVisible: true,
   
7.   text: 'My text',
   + D' X$ z0 z$ F* E
8.   textColor: '#ffffff'
   , k8 Z7 h/ k& s+ f( ]
9. });
   
10. mainButton.backgroundColor(); // '#000000'
    
11. mainButton.hasShineEffect(); // true
    
12. mainButton.isEnabled(); // true
    
13. mainButton.isLoaderVisible(); // true
    5 \+ |; F" l) p" J
14. mainButton.isVisible(); // true
    3 \! s- h5 ~+ q* s2 t0 i6 \
15. mainButton.text(); // 'My text'
    
16. mainButton.textColor(); // '#ffffff'
    ; i8 a, T: l9 L! V# }3 J5 O
17. 
    & I8 P. R! s  w  c
18. mainButton.state();
    
19. // {
    ; y3 A5 Q. t- n% U, \9 b; l
20. //   backgroundColor: '#000000',
    
21. //   hasShineEffect: true,
    3 ]5 }3 i% ]" e5 }3 h
22. //   isActive: true,
    
23. //   isLoaderVisible: true,
    
24. //   isVisible: true,
    8 x' r5 B# i* w1 u& r) i* j
25. //   text: 'My text',
    $ F8 U5 n7 s! P. x( a
26. //   textColor: '#ffffff'
    
27. // }

复制代码

Functions :

1. import {
   3 q1 a* L3 C! R) T
2.   setMainButtonParams,
   + J  ]6 \2 _; s% K4 `9 K* ~' b5 L2 l
3.   mainButtonBackgroundColor,
   : E7 e; P! F" t2 j4 @. x
4.   mainButtonHasShineEffect,
   
5.   isMainButtonVisible,
   
6.   isMainButtonEnabled,
   
7.   isMainButtonLoaderVisible,
   
8.   mainButtonState,
   
9.   mainButtonTextColor,
   4 m+ H) v$ i) e: ]
10.   mainButtonText,
    
11. } from '@telegram-apps/sdk';
    + U0 F( `/ ]- H
12. 
    
13. setMainButtonParams({
    ) k2 z7 l& m7 S# L
14.   backgroundColor: '#000000',
    6 M  _% ^- U* Z; x4 X
15.   hasShineEffect: true,
    6 A) c# N$ @  s9 K# V
16.   isEnabled: true,
    5 y/ T* W3 [2 ?* I( C* I
17.   isLoaderVisible: true,
    
18.   isVisible: true,
      _" o9 F7 r+ ~
19.   text: 'My text',
    
20.   textColor: '#ffffff'
    
21. });
    + w2 S2 L. A( x: |: n* \
22. mainButtonBackgroundColor(); // '#000000'
    0 z! Y8 f* p8 C7 d' C; r
23. mainButtonHasShineEffect(); // true
    9 b. B6 H! r9 T! C3 J
24. isMainButtonEnabled(); // true
    
25. isMainButtonLoaderVisible(); // true
    * M( N5 i4 \3 v# i# \' o
26. isMainButtonVisible(); // true
    
27. mainButtonText(); // 'My text'
    
28. mainButtonTextColor(); // '#ffffff'
    : J2 h) J1 A" f. y
29. 
    
30. mainButtonState();
    8 ~3 J* f" C: q9 O. S: ?
31. // {
    / T6 u5 q  T( W& B# F, P
32. //   backgroundColor: '#000000',
    
33. //   hasShineEffect: true,
    0 _) a8 X1 G0 X8 Q
34. //   isActive: true,
    4 w' e$ `: W5 L* w5 P; O5 C5 E
35. //   isLoaderVisible: true,
    ) U3 Y. O3 \% Z7 H/ D$ [; s
36. //   isVisible: true,
    
37. //   text: 'My text',
    
38. //   textColor: '#ffffff'
    
39. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   
2.   console.log('Clicked!');
   0 E' g3 P% |1 t/ N# ~, L
3. }
   ' p* e- K' m' U/ X
4. 
   
5. const offClick = mainButton.onClick(listener);
   
6. offClick();
   5 S/ B: U" I6 K* O' U( ]! V
7. // or
   
8. mainButton.onClick(listener);
   
9. mainButton.offClick(listener);

复制代码

Functions :

1. import {
   - z' s/ h$ L5 b# F
2.   onMainButtonClick,
   
3.   offMainButtonClick,
   
4. } from '@telegram-apps/sdk';
   
5. 
   ' z2 t) p+ D  n* Z! i! f
6. function listener() {
   3 z$ h& @' e4 y+ R: `, n7 I" K
7.   console.log('Clicked!');
   . p7 n9 c/ d& m- z1 E) a
8. }
   
9. 
   9 [8 W+ m% e; N8 ]" J1 \
10. const offClick = onMainButtonClick(listener);
    
11. offClick();
    
12. // or
    * d8 t0 w- ^9 \9 w8 S( P: y
13. onMainButtonClick(listener);
    
14. offMainButtonClick(listener);

复制代码

% A2 Y5 ~- B7 j/ b: p: V
- d' T  W0 V4 F) ^5 [6 F, s