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

riyad

设置按钮​

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

检查支持​

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

Variable :

1. import { settingsButton } from '@telegram-apps/sdk';
   
2. 
   - c; m8 J1 f% j2 S- a
3. settingsButton.isSupported(); // boolean

复制代码

Functions :

1. import { isSettingsButtonSupported } from '@telegram-apps/sdk';
   # \) D& X( f. n3 Q1 B+ h' H
2. 
   
3. isSettingsButtonSupported(); // boolean

复制代码

安装​

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

Variable :

1. import { settingsButton } from '@telegram-apps/sdk';
   ; \) w2 a2 s1 `: S
2. 
   
3. settingsButton.mount();
   & R# |: t% N3 U
4. settingsButton.isMounted(); // true

复制代码

Functions :

1. import {
   2 v0 z4 _' p. V, M7 }
2.   mountSettingsButton,
   6 E' m4 w+ F% y3 C
3.   isSettingsButtonMounted,
   
4. } from '@telegram-apps/sdk';
   
5. 
   & k8 @* d1 |& R+ I
6. mountSettingsButton();
   
7. isSettingsButtonMounted(); // true

复制代码

. M) U! |6 Z; U4 t1 u2 L

要卸载，请使用 unmount 方法：

Variable :

1. settingsButton.unmount();
   & J6 |9 z! F( W' h& r! k
2. settingsButton.isMounted(); // false

复制代码

Functions :

1. import {
   - V; a; O6 x! N- \
2.   unmountSettingsButton,
   
3.   isSettingsButtonMounted,
   0 y1 [2 o/ T3 t' B
4. } from '@telegram-apps/sdk';
   : \- L! r9 |5 @0 F/ O0 e
5. 
   
6. unmountSettingsButton();
   
7. isSettingsButtonMounted(); // false

复制代码

展示与隐藏​

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

Variable :

1. settingsButton.show();
   2 F; D* |1 A2 b% s* J
2. settingsButton.isVisible(); // true
   : f; t2 j" f6 U1 P, \8 ?
3. 
   
4. settingsButton.hide();
   3 K! H( {# ~: P2 v$ h/ D3 |5 K
5. settingsButton.isVisible(); // false

复制代码

Functions :

1. import {
   7 c0 T9 V: Z- V  M' F. n
2.   showSettingsButton,
   
3.   hideSettingsButton,
   
4.   isSettingsButtonVisible,
   $ L6 l" E/ t6 |
5. } from '@telegram-apps/sdk';
   * U( F9 K! T. C% z- C5 M* @3 g
6. 
   
7. showSettingsButton();
   
8. isSettingsButtonVisible(); // true
   
9. 
   
10. hideSettingsButton();
    . v# b0 O/ k; `, i. N! A
11. isSettingsButtonVisible(); // false

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   
2.   console.log('Clicked!');
   
3. }
   
4. 
   
5. const offClick = settingsButton.onClick(listener);
   
6. offClick();
   
7. // or
   
8. settingsButton.onClick(listener);
   8 x; w  m  t: ^# J. o
9. settingsButton.offClick(listener);

复制代码

Functions :

1. import { onSettingsButtonClick, offSettingsButtonClick } from '@telegram-apps/sdk';
   
2. 
   ( x, W6 Q9 a% p5 E+ k5 Q5 s! a8 b
3. function listener() {
   
4.   console.log('Clicked!');
   
5. }
   
6. 
   
7. const offClick = onSettingsButtonClick(listener);
   . [' T, I2 G5 v% G
8. offClick();
   
9. // or
   7 H4 q( v/ e# I
10. onSettingsButtonClick(listener);
    1 K+ Q- c# i* I7 y8 L( k6 F0 O
11. offSettingsButtonClick(listener);

复制代码