Telegram 小程序 | TypeScript @telegram-apps/sdk @1.x | 组件 | 主按钮

riyad

主按钮​

执行 Telegram 迷你应用程序 主按钮。

初始化​

要初始化组件，请使用 initMainButton 函数：

1. import { initMainButton } from '@telegram-apps/sdk';
   - @$ f( U4 a* B9 M; s1 Y8 T
2. 
   
3. const [mainButton] = initMainButton();

复制代码

按钮可见性​

要控制主按钮的可见性，开发人员可以使用 show() 和 hide() 等方法。 它们都会更新组件的 isVisible 属性：

1. mainButton.show();
   ' d7 o' D( R. |) C3 r. ^6 S
2. console.log(mainButton.isVisible); // true  
   
3. 
     \9 e3 p5 d: U1 ?7 U$ ^" W
4. mainButton.hide();
   
5. console.log(mainButton.isVisible); // false

复制代码

装载机​

主按钮内部可以显示一个加载器。 要控制其可见性， 使用 showLoader() 和 hideLoader() 方法。 isLoaderVisible 属性将被更改。

1. mainButton.showLoader();
   % \) B7 `* r& p, {
2. console.log(mainButton.isLoaderVisible); // true  
   8 [" ^' }+ Z8 m' r' |8 ^  f, q0 E
3. 
   , D1 \# |/ P) b9 k% p9 T8 o
4. mainButton.hideLoader();
   
5. console.log(mainButton.isLoaderVisible); // false

复制代码

活跃状态​

可以通过调用 disable() 和 enable() 方法启用或禁用主按钮。 这两个方法都会更新 isEnabled 属性。

1. mainButton.enable();
   . b/ [1 v' S* ?' r
2. console.log(mainButton.isEnabled); // true  
   
3. 
   
4. mainButton.disable();
   $ ^6 O: q7 s9 r3 g5 q' M
5. console.log(mainButton.isEnabled); // false

复制代码

启用主按钮后，用户就可以点击它。 因此，主按钮将 接收click事件。背景颜色​

要更新主按钮的背景颜色，请使用 setBackgroundColor(color: RGB) 方法。 将更新 backgroundColor 属性。

1. mainButton.setBackgroundColor('#ffffaa');
   9 M( s) q$ K7 {2 K. ^; ]7 h
2. console.log(mainButton.color); // '#ffffaa'

复制代码

文字颜色​

要更新主按钮文本的颜色，请使用 setTextColor(color: RGB) 方法。 它将更新 textColor属性。

1. mainButton.setTextColor('#cca233');
   + v5 J. V$ R+ S2 s; N4 a
2. console.log(mainButton.textColor); // '#cca233'

复制代码

文本​

要更新主按钮文本，请使用 setText(text: string) 方法。 它将更新 text 属性。

1. mainButton.setText('Submit');
   4 c' [  M# h$ M
2. console.log(mainButton.text); // 'Submit'

复制代码

设置多个属性​

有时，连续设置几个主按钮参数可能会导致 UI 出现问题。 为了避免这个问题，可以使用 setParams 方法：

1. mainButton.setParams({
   
2.   backgroundColor: '#aa1388',
   
3.   text: 'Stop',
   6 _$ U, d# v: V8 T
4.   isVisible: true,
   
5. });

复制代码

事件​

可被 跟踪 的事件列表：

[td]

事件	监听器	触发条件
click	() => void	点击了主按钮
change	() => void	组件中的某些部分发生了变化
change:backgroundColor	(value: RGB) => void	更改了 backgroundColor 属性
change:isLoaderVisible	(value: boolean) => void	更改了 isLoaderVisible 属性
change:isEnabled	(value: boolean) => void	已更改 isEnabled 属性
change:isVisible	(value: boolean) => void	更改了 isVisible 属性
change:text	(value: string) => void	更改了 text 属性
change:textColor	(value: RGB) => void	更改了 textColor 属性