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

riyad

设置按钮​

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

检查支持​

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

Variable :

1. import { settingsButton } from '@telegram-apps/sdk';
   3 T- [8 o/ o5 J; n
2. 
   
3. settingsButton.isSupported(); // boolean

复制代码

Functions :

1. import { isSettingsButtonSupported } from '@telegram-apps/sdk';
   : j! s- b. x+ f6 [0 e" B( e* o' q
2. 
   
3. isSettingsButtonSupported(); // boolean

复制代码

安装​

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

Variable :

1. import { settingsButton } from '@telegram-apps/sdk';
   * s/ c4 h1 G5 S3 ?3 S$ q) @  `
2. 
   
3. settingsButton.mount();
   + d9 S4 p6 J  z5 {4 D$ T7 D1 D' X
4. settingsButton.isMounted(); // true

复制代码

Functions :

1. import {
   + p) }4 g5 R" G$ X/ p/ ~9 Q
2.   mountSettingsButton,
   
3.   isSettingsButtonMounted,
   
4. } from '@telegram-apps/sdk';
   3 E; H+ G" z( l! J
5. 
   * T! P, w" u& d" j
6. mountSettingsButton();
   8 C# N2 s  B  E, w, F
7. isSettingsButtonMounted(); // true

复制代码

. {* V7 F- u4 x0 x' F- U

要卸载，请使用 unmount 方法：

Variable :

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

复制代码

Functions :

1. import {
   ; y' S. [  V* w! `% _& |6 i" `
2.   unmountSettingsButton,
   
3.   isSettingsButtonMounted,
     d) ]4 v* ]* j9 Y4 }* |
4. } from '@telegram-apps/sdk';
   
5. 
   
6. unmountSettingsButton();
   
7. isSettingsButtonMounted(); // false

复制代码

展示与隐藏​

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

Variable :

1. settingsButton.show();
   
2. settingsButton.isVisible(); // true
   - L. E$ M& u, _% C! ?8 N7 E" j
3. 
   ! l8 J/ v! K( {! I" d" B% u& @
4. settingsButton.hide();
   & `/ ~9 P9 X, r# U! y6 j
5. settingsButton.isVisible(); // false

复制代码

Functions :

1. import {
   
2.   showSettingsButton,
   % V* b& H+ L9 o% a+ p. a2 T: Z
3.   hideSettingsButton,
   " [! J: U2 o5 Y
4.   isSettingsButtonVisible,
   % U* I) v9 n: e0 Q- H# p
5. } from '@telegram-apps/sdk';
   
6. 
     l& m$ q/ o* s4 y# A/ z1 S8 x
7. showSettingsButton();
   ) f/ S1 _3 f5 c& t1 ~' f
8. isSettingsButtonVisible(); // true
   
9. 
   
10. hideSettingsButton();
    % {  O; ~; J: B/ o% I! d1 {2 K
11. isSettingsButtonVisible(); // false

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   2 y: L) R/ p9 d2 s
2.   console.log('Clicked!');
   $ }. }5 J3 @7 }+ S
3. }
   . B- p2 p- S$ a% h  {# _1 M
4. 
   ( @) R2 Z& s# s- m
5. const offClick = settingsButton.onClick(listener);
   $ O, @0 l5 ^4 g, s
6. offClick();
   
7. // or
   
8. settingsButton.onClick(listener);
   3 s. t) f" H" S! i
9. settingsButton.offClick(listener);

复制代码

Functions :

1. import { onSettingsButtonClick, offSettingsButtonClick } from '@telegram-apps/sdk';
     ]  p: _6 h1 Z
2. 
   
3. function listener() {
   0 D- [2 Q5 R( g$ v( H( T& R
4.   console.log('Clicked!');
   
5. }
   
6. 
   
7. const offClick = onSettingsButtonClick(listener);
   
8. offClick();
   * y- U3 l3 P; p& m$ H
9. // or
   
10. onSettingsButtonClick(listener);
    
11. offSettingsButtonClick(listener);

复制代码

  T! I* D! c: L4 P1 Z( E0 X
6 M: o$ \; @, }; B) A' c7 a. k