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

riyad

辅助按钮​

负责 Telegram 迷你应用程序二级按钮的💠组件。

检查支持​

要检查当前 Telegram 迷你应用程序版本是否支持辅助按钮，请使用 isSupported 方法：

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   9 O; V' j4 V( j7 A8 h' s! D+ B8 E
2. 
   
3. secondaryButton.isSupported(); // boolean

复制代码

Functions :

1. import { isSecondaryButtonSupported } from '@telegram-apps/sdk';
   
2. 
   
3. isSecondaryButtonSupported(); // boolean

复制代码

安装​

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

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   6 j- u3 {. l- B6 F0 J' G
2. 
   $ m; A, P# B2 d8 f* e# A: m
3. secondaryButton.mount();
   0 t, t; i: ?( `& _# p! h# O/ H
4. secondaryButton.isMounted(); // true

复制代码

Functions :

1. import {
   
2.   mountSecondaryButton,
   ; R5 P) V" f2 v! h4 G8 L" o
3.   isSecondaryButtonMounted,
   
4. } from '@telegram-apps/sdk';
   - ]+ w' T8 o  c1 W/ R! v
5. 
   " w7 H4 ^. l1 L. }
6. mountSecondaryButton();
   8 R3 ?2 a9 h# q- y9 h* G, W8 e2 o
7. isSecondaryButtonMounted(); // true

复制代码

. _8 g8 S1 Q/ v; q' R* `

要卸载，请使用 unmount 方法：

Variable :

1. secondaryButton.unmount();
   & @/ g% l) R9 ?5 g+ y
2. secondaryButton.isMounted(); // false

复制代码

Functions :

1. import {
   & Q" m! N, }, ^
2.   unmountSecondaryButton,
   
3.   isSecondaryButtonMounted,
   ( F: _) X5 S" A4 r
4. } from '@telegram-apps/sdk';
   
5. 
   
6. unmountSecondaryButton();
   
7. isSecondaryButtonMounted(); // false

复制代码

WARNING

该组件的属性取决于 Mini App 和 Theme Params 组件的值。 具体来说，二级按钮使用 Mini App 的 bottomBarBgColor 和一些主题参数颜色。 在使用辅助按钮之前，请确保将这些组件安装到 。

设置属性​

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

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

Variable :

1. secondaryButton.setParams({
   
2.   backgroundColor: '#000000',
   % J9 ]1 p7 ^' D' e5 f( |
3.   hasShineEffect: true,
   / @' i! r6 c' s
4.   isEnabled: true,
   7 ~. z. [2 \2 v8 ]# _2 ]1 u
5.   isLoaderVisible: true,
   
6.   isVisible: true,
   
7.   position: 'top',
   
8.   text: 'My text',
   
9.   textColor: '#ffffff'
   
10. });
    ; l1 I% a& g  b  j% k5 {; {
11. secondaryButton.backgroundColor(); // '#000000'
    . x8 V. w1 y& b2 H. y4 Y
12. secondaryButton.hasShineEffect(); // true
    
13. secondaryButton.isEnabled(); // true
    , ]* R4 Y( u9 P. Q3 o4 q$ \; z
14. secondaryButton.isLoaderVisible(); // true
    
15. secondaryButton.isVisible(); // true
    4 X' h+ f8 F7 h: `: _) j) n2 H
16. secondaryButton.position(); // 'top'
    
17. secondaryButton.text(); // 'My text'
    & D/ }' j, r, i  {& v- {' |- L
18. secondaryButton.textColor(); // '#ffffff'
    # P7 k# h: p1 w+ u+ f
19. 
    
20. secondaryButton.state();
    ' t; |. w2 y9 n: ]0 J2 K0 d
21. // {
    
22. //   backgroundColor: '#000000',
    2 R$ {/ s" g2 C; c3 ?4 g3 ^: p
23. //   hasShineEffect: true,
    
24. //   isActive: true,
    2 a7 D) U* u+ W
25. //   isLoaderVisible: true,
    
26. //   isVisible: true,
    8 S$ K" g" f+ O1 B+ f( t
27. //   position: 'top',
    
28. //   text: 'My text',
    
29. //   textColor: '#ffffff'
    
30. // }

复制代码

Functions :

1. import {
   ! h3 u  M  ?; `: q" O
2.   setSecondaryButtonParams,
   0 J/ `( h8 E- n0 j% t, A# u
3.   secondaryButtonBackgroundColor,
   
4.   secondaryButtonHasShineEffect,
   # ~1 S" P/ v: m- f+ j# J8 w
5.   isSecondaryButtonVisible,
   
6.   isSecondaryButtonEnabled,
   
7.   isSecondaryButtonLoaderVisible,
   
8.   secondaryButtonState,
   , J: c9 O: W& d. p
9.   secondaryButtonTextColor,
   
10.   secondaryButtonText,
    
11.   secondaryButtonPosition,
    # D; d7 Q. ^2 u, W' K, \" L
12. } from '@telegram-apps/sdk';
    . e  p. R% S( U
13. 
    
14. setSecondaryButtonParams({
    6 m& X, c" ^  C0 o6 o
15.   backgroundColor: '#000000',
    
16.   hasShineEffect: true,
    2 n/ ~3 M$ W( `" K; p( i2 _
17.   isEnabled: true,
    ; g, s, ^6 c, F4 [
18.   isLoaderVisible: true,
    1 C9 x: g4 G* T9 g# u
19.   isVisible: true,
    4 @* s, _) V+ S
20.   position: 'top',
    ! I$ L8 ^8 H+ ]! G/ `) o
21.   text: 'My text',
    / C) n: t( T2 R7 s5 V6 q
22.   textColor: '#ffffff'
    
23. });
    0 I) p2 [: ^5 J; M2 d
24. secondaryButtonBackgroundColor(); // '#000000'
    5 s/ g0 k0 y! S
25. secondaryButtonHasShineEffect(); // true
    
26. isSecondaryButtonEnabled(); // true
    " A' q( e5 K6 p' A% Y; l, i
27. isSecondaryButtonLoaderVisible(); // true
    # n1 p1 r" s4 Q; x- h
28. isSecondaryButtonVisible(); // true
    
29. secondaryButtonPosition(); // 'top'
    
30. secondaryButtonText(); // 'My text'
    3 I/ B: L% I# A: ~/ G* S
31. secondaryButtonTextColor(); // '#ffffff'
    / ]+ R" s3 M  s) |- h/ h4 [
32. 
    $ }+ f; w2 p; l/ P
33. secondaryButtonState();
    
34. // {
    
35. //   backgroundColor: '#000000',
    
36. //   hasShineEffect: true,
    : L: D, s. r, g' Z( N9 X6 w8 u
37. //   isActive: true,
    - _. g! q4 S: `/ @3 O
38. //   isLoaderVisible: true,
    
39. //   isVisible: true,
    
40. //   position: 'top',
    
41. //   text: 'My text',
    # v1 \- Y! e4 K4 _% A8 }" o
42. //   textColor: '#ffffff'
    
43. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   4 V( L: g6 V0 z/ A
2.   console.log('Clicked!');
   " g( t6 |$ ~9 s. k. d! J
3. }
   
4. 
   
5. const offClick = secondaryButton.onClick(listener);
   - S- B$ \9 K. }1 D
6. offClick();
   
7. // or
   : V( H% N6 A, i5 Z( J3 o
8. secondaryButton.onClick(listener);
   7 Y' N. Q4 x/ k1 A  n: \/ ?
9. secondaryButton.offClick(listener);

复制代码

Functions :

1. import {
   
2.   onSecondaryButtonClick,
   0 f" Q0 d. y: A& e( z5 b3 |
3.   offSecondaryButtonClick,
   
4. } from '@telegram-apps/sdk';
   % G+ w+ m' A1 q9 T- e/ J
5. 
   
6. function listener() {
   
7.   console.log('Clicked!');
   
8. }
   
9. 
   # G  h) ~% h* Y; Q
10. const offClick = onSecondaryButtonClick(listener);
    
11. offClick();
    
12. // or
    ' t+ F! s  ?2 c/ _& ~
13. onSecondaryButtonClick(listener);
    / M0 ?! U. m9 n* j( c9 L( x
14. offSecondaryButtonClick(listener);

复制代码

0 R3 v. c: O" }4 M0 `
; K: u& g, I( y9 B* W9 q  j

农1885

回开源帖是美德！