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

riyad

设置按钮​

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

检查支持​

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

Variable :

1. import { settingsButton } from '@telegram-apps/sdk';
   * Y4 |2 {* D, ^" d: V3 A
2. 
   " a( W% Z1 W; }+ |! \) V1 H, W0 ]8 g
3. settingsButton.isSupported(); // boolean

复制代码

Functions :

1. import { isSettingsButtonSupported } from '@telegram-apps/sdk';
   7 u( G9 G9 i4 S* R( {
2. 
   
3. isSettingsButtonSupported(); // boolean

复制代码

安装​

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

Variable :

1. import { settingsButton } from '@telegram-apps/sdk';
   ) P' _% B. d4 l9 h4 p
2. 
   $ h5 E9 s! t6 r% f3 B) I
3. settingsButton.mount();
   + v4 c  [2 R7 r
4. settingsButton.isMounted(); // true

复制代码

Functions :

1. import {
   
2.   mountSettingsButton,
   
3.   isSettingsButtonMounted,
   
4. } from '@telegram-apps/sdk';
   7 X5 j: \7 `; g; E. s) Z. g" N8 U
5. 
   : M( v8 L( Q1 b2 j8 J, l, Z- @5 r
6. mountSettingsButton();
   
7. isSettingsButtonMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. settingsButton.unmount();
   6 n9 Q, T$ `' h: [. C3 u$ v
2. settingsButton.isMounted(); // false

复制代码

Functions :

1. import {
     o! b! V; B! a8 k. a& T- c7 l1 g
2.   unmountSettingsButton,
   
3.   isSettingsButtonMounted,
   9 O+ b0 s& D( H! y% y
4. } from '@telegram-apps/sdk';
   3 J! q4 p0 Z4 Y7 ]! R% u+ [8 T% i
5. 
   
6. unmountSettingsButton();
   
7. isSettingsButtonMounted(); // false

复制代码

展示与隐藏​

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

Variable :

1. settingsButton.show();
   
2. settingsButton.isVisible(); // true
   
3. 
   
4. settingsButton.hide();
   
5. settingsButton.isVisible(); // false

复制代码

Functions :

1. import {
   
2.   showSettingsButton,
   
3.   hideSettingsButton,
   
4.   isSettingsButtonVisible,
   
5. } from '@telegram-apps/sdk';
   2 A+ v* W% [% u4 W: G
6. 
   
7. showSettingsButton();
   
8. isSettingsButtonVisible(); // true
   + R1 ~0 J9 E( S; g3 m+ N- o
9. 
   
10. hideSettingsButton();
    0 |; S6 T$ L, ]8 d& H
11. isSettingsButtonVisible(); // false

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   ) r" G/ r. n* p
2.   console.log('Clicked!');
   
3. }
   
4. 
   0 @# F- D0 S8 o1 G5 g2 E* z
5. const offClick = settingsButton.onClick(listener);
   
6. offClick();
   
7. // or
   ' M% n7 U7 L' Z  L# I6 t
8. settingsButton.onClick(listener);
   
9. settingsButton.offClick(listener);

复制代码

Functions :

1. import { onSettingsButtonClick, offSettingsButtonClick } from '@telegram-apps/sdk';
   3 `+ |9 s, R9 r, q3 P) `
2. 
   
3. function listener() {
   " j" f9 I* ^% ^) D1 z
4.   console.log('Clicked!');
   
5. }
   " J7 @; u7 t, K6 Y: i  q# r
6. 
   
7. const offClick = onSettingsButtonClick(listener);
   9 @2 w) M1 N/ K+ _7 b1 s% `
8. offClick();
   
9. // or
   
10. onSettingsButtonClick(listener);
    
11. offSettingsButtonClick(listener);

复制代码

, s2 L. K  ]7 {% n* D5 L; ~( f. ~