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

riyad

主按钮​

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

初始化​

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

1. import { initMainButton } from '@telegram-apps/sdk';
   
2. 
   # t0 i: x" J& v
3. const [mainButton] = initMainButton();

复制代码

按钮可见性​

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

1. mainButton.show();
   
2. console.log(mainButton.isVisible); // true  
   
3. 
   
4. mainButton.hide();
   / [, {/ m6 H7 y- {
5. console.log(mainButton.isVisible); // false

复制代码

装载机​

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

1. mainButton.showLoader();
   2 I$ X: V. Y" I9 i( R6 w  p- L9 i3 {
2. console.log(mainButton.isLoaderVisible); // true  
   " M) ]# |% P. X: L7 G0 I% M
3. 
   # q! J6 V8 V5 |0 X# o: K- a
4. mainButton.hideLoader();
   
5. console.log(mainButton.isLoaderVisible); // false

复制代码

活跃状态​

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

1. mainButton.enable();
   5 W3 `) x6 q: Z  q8 y5 Z" j
2. console.log(mainButton.isEnabled); // true  
   
3. 
   
4. mainButton.disable();
   7 n4 V3 E" N2 u3 ~+ M3 U
5. console.log(mainButton.isEnabled); // false

复制代码

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

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

1. mainButton.setBackgroundColor('#ffffaa');
   3 Y6 Y/ G- A+ \. e) \. j
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');
   
2. console.log(mainButton.text); // 'Submit'

复制代码

设置多个属性​

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

1. mainButton.setParams({
   * s- m3 b, V0 v- y' C
2.   backgroundColor: '#aa1388',
   
3.   text: 'Stop',
   
4.   isVisible: true,
   0 t3 z& ]: n1 @* N: M* E
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 属性

. Z* }0 a1 _- u+ ~4 |! H4 p9 i1 Z