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();
   : A7 }$ F! u# w) G9 X  \
4. mainButton.isMounted(); // true

复制代码

Functions :

1. import { mountMainButton, isMainButtonMounted } from '@telegram-apps/sdk';
   
2. 
   
3. mountMainButton();
   ' A0 U. o6 j6 |) T: i7 r: I! W
4. isMainButtonMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. mainButton.unmount();
   6 ^* o* a' Y8 V/ ?& a9 \4 t7 Y
2. mainButton.isMounted(); // false

复制代码

Functions :

1. import { unmountMainButton, isMainButtonMounted } from '@telegram-apps/sdk';
   ( z/ B1 q8 A" U0 m) ~4 d& p
2. 
   
3. unmountMainButton();
     G5 l. e% l. `- d0 s0 T
4. isMainButtonMounted(); // false

复制代码

WARNING

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

设置属性​

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

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

Variable :

1. mainButton.setParams({
   & e5 w. a9 t" u5 l7 y4 S
2.   backgroundColor: '#000000',
   6 Z/ B+ X5 j* |. H7 f: v
3.   hasShineEffect: true,
   
4.   isEnabled: true,
   " h& p9 k' k8 w4 `5 w: S7 p, y7 [6 \
5.   isLoaderVisible: true,
   
6.   isVisible: true,
   
7.   text: 'My text',
   ) B/ y) c: I2 P) q) F' W
8.   textColor: '#ffffff'
   
9. });
   0 a. z4 d, n$ t- q
10. mainButton.backgroundColor(); // '#000000'
    % k9 i3 I2 o9 Y! a7 K
11. mainButton.hasShineEffect(); // true
    
12. mainButton.isEnabled(); // true
    
13. mainButton.isLoaderVisible(); // true
    : w! s/ c7 T/ t( t
14. mainButton.isVisible(); // true
    ( d/ [/ R+ E& v, R, }: t
15. mainButton.text(); // 'My text'
    
16. mainButton.textColor(); // '#ffffff'
    ) B! ]  L9 ]6 {" d3 L$ [( C1 x
17. 
    
18. mainButton.state();
    0 s5 i4 _: q. T8 Y2 x3 G$ F* j3 l
19. // {
    
20. //   backgroundColor: '#000000',
    
21. //   hasShineEffect: true,
    3 [8 K8 C$ l0 q& j4 z+ w
22. //   isActive: true,
    
23. //   isLoaderVisible: true,
    
24. //   isVisible: true,
    4 L% m4 b9 F+ k8 E+ M; }# n
25. //   text: 'My text',
    
26. //   textColor: '#ffffff'
    
27. // }

复制代码

Functions :

1. import {
   ! H9 |. w0 |% V1 q: S+ B' G
2.   setMainButtonParams,
   . A' S7 m( E+ }
3.   mainButtonBackgroundColor,
   
4.   mainButtonHasShineEffect,
   
5.   isMainButtonVisible,
   " g% K5 M( q9 f  K
6.   isMainButtonEnabled,
   
7.   isMainButtonLoaderVisible,
   
8.   mainButtonState,
   ; F9 C+ ]4 d/ z. c) ?
9.   mainButtonTextColor,
   8 N6 j4 o4 G+ p- Y+ p
10.   mainButtonText,
    
11. } from '@telegram-apps/sdk';
    9 L( y  o4 r) C- w( K7 F
12. 
    
13. setMainButtonParams({
    
14.   backgroundColor: '#000000',
    + D+ ?2 w* [, d1 v7 ?( Q
15.   hasShineEffect: true,
    ( ^+ N9 i- r) g3 q
16.   isEnabled: true,
    $ J7 e0 M3 F7 S' i& n
17.   isLoaderVisible: true,
    
18.   isVisible: true,
    
19.   text: 'My text',
    
20.   textColor: '#ffffff'
    
21. });
    . l4 {$ U1 M/ v9 a& ?4 F6 D. ?, @
22. mainButtonBackgroundColor(); // '#000000'
    
23. mainButtonHasShineEffect(); // true
    
24. isMainButtonEnabled(); // true
    
25. isMainButtonLoaderVisible(); // true
    
26. isMainButtonVisible(); // true
    6 i: P5 Q# p- E( N% w1 t3 n+ J# @
27. mainButtonText(); // 'My text'
    
28. mainButtonTextColor(); // '#ffffff'
    - I) ]9 v, @4 R8 [9 r7 o
29. 
    . s8 B" t8 k0 U8 i/ i3 Y
30. mainButtonState();
    
31. // {
    
32. //   backgroundColor: '#000000',
    ' n7 T- i3 |" `; k
33. //   hasShineEffect: true,
    , R, `2 ?. p% E7 B9 i
34. //   isActive: true,
    2 x% ~6 I  T# f& P2 {1 x
35. //   isLoaderVisible: true,
    ; S$ W: {2 O+ G
36. //   isVisible: true,
    ) i7 s- A) {8 D
37. //   text: 'My text',
    
38. //   textColor: '#ffffff'
    5 @9 o4 o+ }8 r
39. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   $ h9 o3 `5 u0 O4 }
2.   console.log('Clicked!');
   4 e0 O4 r% p8 C( v' a) Q
3. }
   - Z- P+ j1 o7 W' P( A
4. 
   
5. const offClick = mainButton.onClick(listener);
   
6. offClick();
   5 _+ o  H% ?" g4 G
7. // or
   9 g3 B5 M) D5 t! p, z- m5 l% v; a* X
8. mainButton.onClick(listener);
   : W" ]) ?& q+ Y1 f6 ?: U+ h, s
9. mainButton.offClick(listener);

复制代码

Functions :

1. import {
   
2.   onMainButtonClick,
   6 S) y( c0 q$ r8 h
3.   offMainButtonClick,
   
4. } from '@telegram-apps/sdk';
   3 Y4 z1 T& _! |1 R# Q2 h) a/ g
5. 
   2 U! L2 t& O" p. V
6. function listener() {
   - d9 |: @0 P2 l9 S0 E
7.   console.log('Clicked!');
   
8. }
   
9. 
   4 [& x& r- L$ N
10. const offClick = onMainButtonClick(listener);
    
11. offClick();
    . V5 i# v6 u* z! j; y# |$ {( m% H
12. // or
    
13. onMainButtonClick(listener);
    + G; u$ f5 t, d  {
14. offMainButtonClick(listener);

复制代码