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

riyad

设置按钮​

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

检查支持​

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

Variable :

1. import { settingsButton } from '@telegram-apps/sdk';
   6 W) t0 p/ j+ g' w& X* e: e# d
2. 
   - N; u. l2 t7 m' I
3. settingsButton.isSupported(); // boolean

复制代码

Functions :

1. import { isSettingsButtonSupported } from '@telegram-apps/sdk';
   
2. 
   ; [5 ?8 O0 K' _. k) c
3. isSettingsButtonSupported(); // boolean

复制代码

安装​

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

Variable :

1. import { settingsButton } from '@telegram-apps/sdk';
   & [/ l5 t/ M  ^8 h
2. 
   
3. settingsButton.mount();
   
4. settingsButton.isMounted(); // true

复制代码

Functions :

1. import {
   
2.   mountSettingsButton,
   / B0 }% C" C) q. j, [* U
3.   isSettingsButtonMounted,
   3 c3 n* K6 V, `# V. p
4. } from '@telegram-apps/sdk';
   6 s( _; g' N; }. @  z
5. 
   
6. mountSettingsButton();
   + ]$ [# G- N& R1 L1 s5 h: j
7. isSettingsButtonMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

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

复制代码

Functions :

1. import {
   
2.   unmountSettingsButton,
   
3.   isSettingsButtonMounted,
   & T2 o/ t# G1 L
4. } from '@telegram-apps/sdk';
   8 S' c% _; z: J1 V3 Z+ ^; J
5. 
   " }" Q/ Y. ~2 s) p% _( e  W
6. unmountSettingsButton();
   
7. isSettingsButtonMounted(); // false

复制代码

展示与隐藏​

要更改按钮的可见性，请使用 hide() 和 show() 方法。 这些方法会更新 isVisible 信号属性值。

Variable :

1. settingsButton.show();
   
2. settingsButton.isVisible(); // true
   
3. 
   # q. D% q2 K+ P$ v- F* E' ]
4. settingsButton.hide();
   
5. settingsButton.isVisible(); // false

复制代码

Functions :

1. import {
   , ]% h% j7 w4 Q3 A
2.   showSettingsButton,
   * e) [' a- L2 @1 d' D  x
3.   hideSettingsButton,
   5 l: V! D# j! p5 o0 f) D
4.   isSettingsButtonVisible,
   
5. } from '@telegram-apps/sdk';
   
6. 
   + {7 u1 h) e) S# ~7 Q- H
7. showSettingsButton();
   
8. isSettingsButtonVisible(); // true
   0 Y2 W* `2 W3 _: y  f8 N
9. 
   . R( a( X1 p1 C/ @9 F: x# g* I6 h
10. hideSettingsButton();
    6 b6 i1 u) n$ y7 d2 c. O
11. isSettingsButtonVisible(); // false

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   
2.   console.log('Clicked!');
   & s, {% _7 R) {5 A. E2 }
3. }
   
4. 
   
5. const offClick = settingsButton.onClick(listener);
   
6. offClick();
   5 p" P" j: `6 R$ p/ o, U) m. c& n
7. // or
     M' Q4 k% w) M$ o: F4 Z
8. settingsButton.onClick(listener);
   
9. settingsButton.offClick(listener);

复制代码

Functions :

1. import { onSettingsButtonClick, offSettingsButtonClick } from '@telegram-apps/sdk';
   
2. 
   & d3 ^) R" Z. |8 W
3. function listener() {
   2 x) p  j7 I. @+ }5 ]+ s6 L- R7 M: Y
4.   console.log('Clicked!');
   / C. B1 l8 C+ @; n
5. }
   ' Z4 |& e: {7 F9 e+ {/ g3 r$ x$ y
6. 
   
7. const offClick = onSettingsButtonClick(listener);
   
8. offClick();
   6 `! w2 e" z. {% P
9. // or
   ! v  }8 x- v5 `4 E
10. onSettingsButtonClick(listener);
    . L: ^8 ~9 q: |
11. offSettingsButtonClick(listener);

复制代码

1 E* G7 [  h' ~5 c; ^