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

riyad

主按钮​

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

安装​

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

Variable :

1. import { mainButton } from '@telegram-apps/sdk';
   
2. 
   - k* S5 t8 J' J! r/ `' N, f
3. mainButton.mount();
   * Z% o: L. W% y4 V; V$ e- G5 H
4. mainButton.isMounted(); // true

复制代码

Functions :

1. import { mountMainButton, isMainButtonMounted } from '@telegram-apps/sdk';
   4 D9 {' ~2 s& h! l: L6 L# O
2. 
   , q' J+ O5 T1 L4 n5 T1 n
3. mountMainButton();
   5 g* y2 q% {6 s; B: |" o
4. isMainButtonMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. mainButton.unmount();
   4 `/ [) X9 G4 \* x0 g
2. mainButton.isMounted(); // false

复制代码

Functions :

1. import { unmountMainButton, isMainButtonMounted } from '@telegram-apps/sdk';
   : Y' i" E4 r3 q
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,
   ! A# s9 F  N7 l4 e0 G: j  H! A
4.   isEnabled: true,
   
5.   isLoaderVisible: true,
   & ^- u3 s2 j- p- r
6.   isVisible: true,
   / T  ~; T# E' e7 o6 W1 b
7.   text: 'My text',
   + v: \1 t# N" B9 V( O" H
8.   textColor: '#ffffff'
   
9. });
   
10. mainButton.backgroundColor(); // '#000000'
    + C, ]7 \& b% ~
11. mainButton.hasShineEffect(); // true
    ) e: X0 S6 }' k# e9 \# L. J( [
12. mainButton.isEnabled(); // true
    " z8 V$ k, j% D! n' c% n) q1 |  ?
13. mainButton.isLoaderVisible(); // true
    1 x) a; T. k0 D7 p+ F6 V7 j, S6 I
14. mainButton.isVisible(); // true
    
15. mainButton.text(); // 'My text'
    ' [6 X4 o3 Z1 I3 `3 ?
16. mainButton.textColor(); // '#ffffff'
    
17. 
    
18. mainButton.state();
    
19. // {
    
20. //   backgroundColor: '#000000',
    
21. //   hasShineEffect: true,
    
22. //   isActive: true,
    
23. //   isLoaderVisible: true,
    
24. //   isVisible: true,
    
25. //   text: 'My text',
    6 t$ _: v; v2 B% B" G
26. //   textColor: '#ffffff'
    0 [! M  X$ O7 X6 Q' Z4 E
27. // }

复制代码

Functions :

1. import {
   
2.   setMainButtonParams,
   . i" B" Y( ~: C# e
3.   mainButtonBackgroundColor,
   + ~$ D' W3 t: T& p" x( |' G
4.   mainButtonHasShineEffect,
   # ]9 Z" ?" f# E! J, ~
5.   isMainButtonVisible,
   
6.   isMainButtonEnabled,
   ! D( z& i( n2 \. \5 v7 O3 m3 O0 C1 @" C
7.   isMainButtonLoaderVisible,
   
8.   mainButtonState,
   . H* }+ ~7 V2 e1 M. j& K) R
9.   mainButtonTextColor,
   
10.   mainButtonText,
    3 Q* }5 w1 C$ A# d0 C
11. } from '@telegram-apps/sdk';
    
12. 
    . _5 L; D; J( F5 `$ F0 x. q
13. setMainButtonParams({
    - D2 l. z3 ?% g% F
14.   backgroundColor: '#000000',
    # J! Z+ d- I7 T% ?% b$ Y! N  B, r9 f1 N
15.   hasShineEffect: true,
    9 ]* d: n0 y4 d- v
16.   isEnabled: true,
    - R, n1 r6 h8 t9 x, Q1 [; e
17.   isLoaderVisible: true,
    9 D, c2 m- F# U3 m
18.   isVisible: true,
    " \! i0 c% l# }" L
19.   text: 'My text',
    ! N$ }, W9 H3 H4 o+ D  O
20.   textColor: '#ffffff'
    
21. });
    
22. mainButtonBackgroundColor(); // '#000000'
    
23. mainButtonHasShineEffect(); // true
    
24. isMainButtonEnabled(); // true
    ' j4 V  v$ o% ]7 I; Z' ~% x3 l1 a- _
25. isMainButtonLoaderVisible(); // true
    ' C* m, n- `+ E' X5 h3 q# u
26. isMainButtonVisible(); // true
    
27. mainButtonText(); // 'My text'
    
28. mainButtonTextColor(); // '#ffffff'
    
29. 
    
30. mainButtonState();
    
31. // {
    ) Y3 Y, {. x, p5 ~
32. //   backgroundColor: '#000000',
    ; Z" O! @- L+ y. s9 U4 f
33. //   hasShineEffect: true,
    4 |4 P, A0 e% l+ Y$ y$ C8 J: |
34. //   isActive: true,
    9 \. c: K2 T3 d+ ?% o- E
35. //   isLoaderVisible: true,
    * N5 h& @) ?1 L$ Y7 B/ {# P8 Y
36. //   isVisible: true,
    / d5 _0 O! O( A& T0 ]; E
37. //   text: 'My text',
    : o. L0 c/ t& x& h$ H1 D
38. //   textColor: '#ffffff'
    
39. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   
2.   console.log('Clicked!');
   " _4 I" x) N. L& e8 b4 h5 W6 x( L: I
3. }
   
4. 
   * ?% P  {: W: @7 ^: r6 E
5. const offClick = mainButton.onClick(listener);
   
6. offClick();
   
7. // or
   ! d$ ?6 ^* m8 @- j
8. mainButton.onClick(listener);
   * X' c' t1 X7 T- y+ k
9. mainButton.offClick(listener);

复制代码

Functions :

1. import {
   ( R* x3 W9 W+ ^6 W. n6 @
2.   onMainButtonClick,
   
3.   offMainButtonClick,
   + ]7 n. A5 v! Y5 z0 q
4. } from '@telegram-apps/sdk';
   
5. 
   0 l5 b7 e4 W; K5 k6 T' C
6. function listener() {
   
7.   console.log('Clicked!');
   
8. }
   / I$ d, k# I' f# \
9. 
   
10. const offClick = onMainButtonClick(listener);
    
11. offClick();
    9 Z3 L4 }& }" p) g
12. // or
    ! S  D# d- k- y3 n
13. onMainButtonClick(listener);
    , U/ s" y, e* O, a8 j1 O: Y
14. offMainButtonClick(listener);

复制代码

6 L& p# S' y* @1 r6 Q$ c