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

riyad

主按钮​

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

安装​

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

Variable :

1. import { mainButton } from '@telegram-apps/sdk';
   5 h  \9 D) E3 V  B$ H
2. 
   
3. mainButton.mount();
   1 A0 k! C6 T! G# o% l
4. mainButton.isMounted(); // true

复制代码

Functions :

1. import { mountMainButton, isMainButtonMounted } from '@telegram-apps/sdk';
   
2. 
   
3. mountMainButton();
   % D* q  [0 d/ q$ R$ J
4. isMainButtonMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

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

复制代码

Functions :

1. import { unmountMainButton, isMainButtonMounted } from '@telegram-apps/sdk';
   / G6 P6 {6 `  C. J; }8 }+ Q- k/ o
2. 
   / b" H( N" H: i- w1 E
3. unmountMainButton();
   ) ?" p: s' B& a- f0 W6 p% r
4. isMainButtonMounted(); // false

复制代码

WARNING

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

设置属性​

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

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

Variable :

1. mainButton.setParams({
   ' L/ X# N( {  f
2.   backgroundColor: '#000000',
   6 y% T5 S( L5 E) j3 `
3.   hasShineEffect: true,
   8 ]9 D7 O$ K# e' {6 x
4.   isEnabled: true,
   . s. f; R5 w2 X0 c( }$ k5 p
5.   isLoaderVisible: true,
   
6.   isVisible: true,
   & {8 c0 U# c) b1 B2 e+ H3 F4 {$ K9 p
7.   text: 'My text',
   
8.   textColor: '#ffffff'
   # l4 B* z* N. [3 E5 Q8 m
9. });
   7 L' ]9 L+ o& X# M" c# `5 {
10. mainButton.backgroundColor(); // '#000000'
    , {. Y' G3 o0 B: K6 F
11. mainButton.hasShineEffect(); // true
    7 ^; S2 G7 k% n% G6 Q/ g- I, Z; _, S
12. mainButton.isEnabled(); // true
    
13. mainButton.isLoaderVisible(); // true
    7 J  q: w; M9 ?0 }- {2 u
14. mainButton.isVisible(); // true
    * f$ ^2 D& ?5 {
15. mainButton.text(); // 'My text'
    
16. mainButton.textColor(); // '#ffffff'
    
17. 
    ) h# m# [2 U' C+ M
18. mainButton.state();
    ' L% ?+ }5 M9 ?+ l! }) I8 l
19. // {
    
20. //   backgroundColor: '#000000',
    
21. //   hasShineEffect: true,
    
22. //   isActive: true,
    
23. //   isLoaderVisible: true,
    : E$ t/ O. [! w0 z+ Y& X% r# S
24. //   isVisible: true,
    ' ~3 a: O' [5 S
25. //   text: 'My text',
      y/ m$ {& z: k7 g( F6 L+ V
26. //   textColor: '#ffffff'
    * }% l& K- o# {$ o
27. // }

复制代码

Functions :

1. import {
   : B& j& e' ]' l; {5 S
2.   setMainButtonParams,
   
3.   mainButtonBackgroundColor,
   5 F9 B/ r: C" r
4.   mainButtonHasShineEffect,
   * ]0 z9 S' D5 L6 v
5.   isMainButtonVisible,
   
6.   isMainButtonEnabled,
   : L; v+ j9 F0 d3 Y' x1 ^, u4 H5 \
7.   isMainButtonLoaderVisible,
   ! c, x, U4 N$ E. C5 R
8.   mainButtonState,
   7 A) N7 b/ Q5 B0 y3 m
9.   mainButtonTextColor,
   # V- I! r6 d/ l* D7 b1 T8 I
10.   mainButtonText,
    , J% v- w' p7 {& t; ^
11. } from '@telegram-apps/sdk';
    # B/ t5 Y* ~- R* w" b
12. 
    
13. setMainButtonParams({
    
14.   backgroundColor: '#000000',
    
15.   hasShineEffect: true,
    , [; Q' _) h$ X
16.   isEnabled: true,
    
17.   isLoaderVisible: true,
    , ?4 a! X: f$ H9 l) U
18.   isVisible: true,
    
19.   text: 'My text',
    * A( y6 h4 O. v; M: l& ~+ O7 t
20.   textColor: '#ffffff'
    - t* C2 I! K# I9 p+ z' r
21. });
    ' l2 F1 O1 F* A  k, |" P1 \
22. mainButtonBackgroundColor(); // '#000000'
    2 e% c, l: }: u' ]) b6 ~
23. mainButtonHasShineEffect(); // true
    
24. isMainButtonEnabled(); // true
    
25. isMainButtonLoaderVisible(); // true
    , N; \. g! s5 a* h0 T. ?8 B" a
26. isMainButtonVisible(); // true
    
27. mainButtonText(); // 'My text'
    3 i* S2 A$ t8 |2 b
28. mainButtonTextColor(); // '#ffffff'
    
29. 
    4 _! p, V: L# e  U2 [
30. mainButtonState();
    
31. // {
    
32. //   backgroundColor: '#000000',
    
33. //   hasShineEffect: true,
    
34. //   isActive: true,
    
35. //   isLoaderVisible: true,
    + v, f! O( g; d, H8 C8 ]
36. //   isVisible: true,
    4 Z5 P* l" ~/ F' E- d% v
37. //   text: 'My text',
    , P, {# G5 _# O, C* M
38. //   textColor: '#ffffff'
    ' ]( r, O6 B( a* }) u5 i
39. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
     c, a! U/ E, v* o
2.   console.log('Clicked!');
   
3. }
   
4. 
     z1 d( i; t7 E" \/ t+ x
5. const offClick = mainButton.onClick(listener);
   
6. offClick();
   
7. // or
   ( T5 L/ y  i$ d% {" X
8. mainButton.onClick(listener);
   
9. mainButton.offClick(listener);

复制代码

Functions :

1. import {
   
2.   onMainButtonClick,
   
3.   offMainButtonClick,
   
4. } from '@telegram-apps/sdk';
   
5. 
   
6. function listener() {
   : I0 w, m5 r- {, R: C
7.   console.log('Clicked!');
   8 e9 \9 U* N7 q* Z: u) m
8. }
   2 A( ^; c& v! E4 ~
9. 
   
10. const offClick = onMainButtonClick(listener);
    6 z* Y- [6 t+ T* o$ u8 ~6 ?6 I
11. offClick();
    
12. // or
    # ?8 V1 F" o. n* _& P
13. onMainButtonClick(listener);
    $ s$ F& E8 Q: D' c2 A: F( J& w
14. offMainButtonClick(listener);

复制代码

5 @8 P& f' Q/ f+ R5 d