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';
   & i8 \: I  }4 @; ?' M7 r) r, {
2. 
   % a  Z, J/ K6 m1 \  |1 M
3. mountMainButton();
   
4. isMainButtonMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. mainButton.unmount();
   6 J" k) _& }5 Q1 m8 |0 U( H
2. mainButton.isMounted(); // false

复制代码

Functions :

1. import { unmountMainButton, isMainButtonMounted } from '@telegram-apps/sdk';
   + d( I0 x- n4 m2 u
2. 
   2 k% H% K+ b  d2 T
3. unmountMainButton();
   
4. isMainButtonMounted(); // false

复制代码

WARNING

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

设置属性​

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

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

Variable :

1. mainButton.setParams({
   
2.   backgroundColor: '#000000',
   # f' o5 M0 v- `, B+ c# H& f
3.   hasShineEffect: true,
   ( r5 c& T  I: ]0 x& L
4.   isEnabled: true,
   9 t# D& \9 T4 J- @
5.   isLoaderVisible: true,
   5 W) d/ w  b/ l, |
6.   isVisible: true,
   
7.   text: 'My text',
   
8.   textColor: '#ffffff'
   
9. });
   
10. mainButton.backgroundColor(); // '#000000'
    ' L6 M" U# B: r: R( j
11. mainButton.hasShineEffect(); // true
    
12. mainButton.isEnabled(); // true
    
13. mainButton.isLoaderVisible(); // true
    2 V8 A: x" }6 P& H6 O
14. mainButton.isVisible(); // true
    6 H9 a/ n3 ?% O" [$ a1 }: X% @$ r
15. mainButton.text(); // 'My text'
    " F/ s0 D1 U1 h
16. mainButton.textColor(); // '#ffffff'
    
17. 
    7 F- n( d' u7 Z7 t
18. mainButton.state();
    
19. // {
    
20. //   backgroundColor: '#000000',
    
21. //   hasShineEffect: true,
    ) N; k% l6 ~: ~+ T
22. //   isActive: true,
    9 s$ i4 }# Y- k  Y) P6 Q! g
23. //   isLoaderVisible: true,
    
24. //   isVisible: true,
    - ^0 m. s! O5 d/ M& p
25. //   text: 'My text',
    
26. //   textColor: '#ffffff'
    
27. // }

复制代码

Functions :

1. import {
   
2.   setMainButtonParams,
   
3.   mainButtonBackgroundColor,
   . G% k, n. Y2 l
4.   mainButtonHasShineEffect,
   
5.   isMainButtonVisible,
   & _4 m: H6 J8 l! [2 S# u
6.   isMainButtonEnabled,
   
7.   isMainButtonLoaderVisible,
   
8.   mainButtonState,
   
9.   mainButtonTextColor,
   
10.   mainButtonText,
    
11. } from '@telegram-apps/sdk';
    
12. 
    
13. setMainButtonParams({
    0 u8 `) p7 `! ~3 A6 U8 m4 H! F0 }
14.   backgroundColor: '#000000',
    # v1 _2 z4 y5 E4 A% d1 s' R
15.   hasShineEffect: true,
    4 k, {7 n* }, G' z# A6 s2 S# [
16.   isEnabled: true,
    
17.   isLoaderVisible: true,
    ( q6 E. o' N" l1 ]2 o) w6 `2 e
18.   isVisible: true,
    3 w6 d' o. P" Z6 v0 H- G) s
19.   text: 'My text',
    
20.   textColor: '#ffffff'
    , t( G7 C- P( V8 ~/ `% A$ P9 \
21. });
    
22. mainButtonBackgroundColor(); // '#000000'
    
23. mainButtonHasShineEffect(); // true
    
24. isMainButtonEnabled(); // true
    / f! _7 R, N+ [- |2 J  k7 I6 K# X8 L' {
25. isMainButtonLoaderVisible(); // true
    8 Y) [! t0 M4 h: ]5 Q
26. isMainButtonVisible(); // true
    / F  @7 o* D8 e% e1 X! Q: F& c
27. mainButtonText(); // 'My text'
    
28. mainButtonTextColor(); // '#ffffff'
    4 q# s. o$ `) y' N: \8 E, E
29. 
    
30. mainButtonState();
    
31. // {
    + q4 \' t, M- ^( Y, Q7 F
32. //   backgroundColor: '#000000',
    
33. //   hasShineEffect: true,
    
34. //   isActive: true,
      E5 H+ y, @0 Q& \$ Y: N
35. //   isLoaderVisible: true,
    ! D; @# q, X# [- d7 M
36. //   isVisible: true,
    
37. //   text: 'My text',
    ' K% e  U, H: D6 X5 i
38. //   textColor: '#ffffff'
    ! C3 @; K2 ^/ x, s
39. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   
2.   console.log('Clicked!');
   
3. }
   
4. 
   
5. const offClick = mainButton.onClick(listener);
   
6. offClick();
   9 V3 G, ]$ u) N4 p8 I; M9 M
7. // or
   
8. mainButton.onClick(listener);
   & c8 W- \3 h6 x& ~
9. mainButton.offClick(listener);

复制代码

Functions :

1. import {
   ' ^  B; H- E& I  c6 r' y
2.   onMainButtonClick,
   3 S) g% k5 }1 f6 U8 [% V9 _
3.   offMainButtonClick,
   
4. } from '@telegram-apps/sdk';
   ' }/ }. h% r) Y" d. X& ^- j
5. 
   
6. function listener() {
   
7.   console.log('Clicked!');
   
8. }
   : f! h% Q0 V7 {3 T  w
9. 
   5 L% Z1 ~, Q8 C! W, V
10. const offClick = onMainButtonClick(listener);
    
11. offClick();
    ! t0 ^! U  G- }6 w  K
12. // or
    ) s% E  e3 e1 }1 ^3 j
13. onMainButtonClick(listener);
    
14. offMainButtonClick(listener);

复制代码