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

riyad

主按钮​

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

初始化​

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

1. import { initMainButton } from '@telegram-apps/sdk';
   
2. 
   
3. const [mainButton] = initMainButton();

复制代码

按钮可见性​

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

1. mainButton.show();
   
2. console.log(mainButton.isVisible); // true  
   
3. 
   
4. mainButton.hide();
   5 J+ }4 c6 M, Z, o' e- _
5. console.log(mainButton.isVisible); // false

复制代码

装载机​

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

1. mainButton.showLoader();
   ( C5 S7 |1 J& Q' X% Q6 R6 _6 V
2. console.log(mainButton.isLoaderVisible); // true  
   
3. 
     i0 o# b; u1 C0 o5 B. m2 }
4. mainButton.hideLoader();
   ( q% w) X  j2 \6 z
5. console.log(mainButton.isLoaderVisible); // false

复制代码

活跃状态​

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

1. mainButton.enable();
   
2. console.log(mainButton.isEnabled); // true  
   , q0 ^4 r3 F$ S' _  \
3. 
   
4. mainButton.disable();
   / s1 ?- l$ t* ?7 j$ Q/ q5 Z. L
5. console.log(mainButton.isEnabled); // false

复制代码

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

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

1. mainButton.setBackgroundColor('#ffffaa');
   " _7 P8 u# |, r* Z
2. console.log(mainButton.color); // '#ffffaa'

复制代码

文字颜色​

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

1. mainButton.setTextColor('#cca233');
   
2. console.log(mainButton.textColor); // '#cca233'

复制代码

文本​

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

1. mainButton.setText('Submit');
   3 F! `3 }9 L# g' P/ h7 ?  X
2. console.log(mainButton.text); // 'Submit'

复制代码

设置多个属性​

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

1. mainButton.setParams({
   
2.   backgroundColor: '#aa1388',
   
3.   text: 'Stop',
   + i) b9 I0 ~7 X) V1 c
4.   isVisible: true,
   - m: P7 x/ H  ]' j( W
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 属性

; |( ?+ ^( ~( y5 x% w1 X3 c( X