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

riyad

设置按钮​

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

检查支持​

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

Variable :

1. import { settingsButton } from '@telegram-apps/sdk';
     E- u5 h/ ?9 R0 l7 a+ Q
2. 
   : Q1 e6 @+ H9 x* b( t
3. settingsButton.isSupported(); // boolean

复制代码

Functions :

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

复制代码

安装​

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

Variable :

1. import { settingsButton } from '@telegram-apps/sdk';
   
2. 
   ( j* H  z4 c) o. B' Y
3. settingsButton.mount();
   
4. settingsButton.isMounted(); // true

复制代码

Functions :

1. import {
   ( z$ h" J3 F# _) e5 j
2.   mountSettingsButton,
   # w& j- o$ t% P! N: e' H, a
3.   isSettingsButtonMounted,
   % o! A; K% t9 c2 y# _0 N; T
4. } from '@telegram-apps/sdk';
   
5. 
   
6. mountSettingsButton();
   
7. isSettingsButtonMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

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

复制代码

Functions :

1. import {
   5 E" Z" A2 r. J+ i1 `' j& g
2.   unmountSettingsButton,
   
3.   isSettingsButtonMounted,
   
4. } from '@telegram-apps/sdk';
   8 ]2 ]1 e+ h( t+ x
5. 
   
6. unmountSettingsButton();
   
7. isSettingsButtonMounted(); // false

复制代码

展示与隐藏​

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

Variable :

1. settingsButton.show();
   
2. settingsButton.isVisible(); // true
   
3. 
   
4. settingsButton.hide();
   - [# h: A7 N* ]8 S/ E
5. settingsButton.isVisible(); // false

复制代码

Functions :

1. import {
   ( `. H. }) c+ T3 Z( P3 d+ |
2.   showSettingsButton,
   
3.   hideSettingsButton,
   
4.   isSettingsButtonVisible,
   
5. } from '@telegram-apps/sdk';
   
6. 
   ! f+ p, d- h: ]$ `: D5 z
7. showSettingsButton();
   # B$ U3 R8 m6 R- ^' m4 C5 w. ~
8. isSettingsButtonVisible(); // true
   
9. 
   : W4 a: L, a( J: f
10. hideSettingsButton();
    , b1 M* V$ ~, q  Q  Y1 C# _) H0 L
11. isSettingsButtonVisible(); // false

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   
2.   console.log('Clicked!');
   ) {! n5 @' y, v
3. }
   ' [, X+ E) N( Z  C" t. ?
4. 
   
5. const offClick = settingsButton.onClick(listener);
   
6. offClick();
   ( b  D! W" h  J: Q
7. // or
   . b: _, y4 k# v9 {6 n/ o
8. settingsButton.onClick(listener);
   
9. settingsButton.offClick(listener);

复制代码

Functions :

1. import { onSettingsButtonClick, offSettingsButtonClick } from '@telegram-apps/sdk';
   
2. 
   
3. function listener() {
   5 q: ~; Z7 N( m5 E
4.   console.log('Clicked!');
   , u) c' n, {9 B6 ~* C8 x
5. }
   
6. 
   
7. const offClick = onSettingsButtonClick(listener);
   
8. offClick();
   , t0 b1 r& A# J! P" o& o/ F
9. // or
   
10. onSettingsButtonClick(listener);
    ( [- Q" i& R' r) B' v$ E
11. offSettingsButtonClick(listener);

复制代码

0 ^$ f/ p+ Q- S4 q# h0 V, O5 o