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

riyad

主按钮​

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

初始化​

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

1. import { initMainButton } from '@telegram-apps/sdk';
   9 `7 A4 I0 Q" W: t
2. 
   
3. const [mainButton] = initMainButton();

复制代码

按钮可见性​

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

1. mainButton.show();
   
2. console.log(mainButton.isVisible); // true  
   
3. 
   
4. mainButton.hide();
   
5. console.log(mainButton.isVisible); // false

复制代码

装载机​

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

1. mainButton.showLoader();
   - f3 L1 Z6 n" b9 K
2. console.log(mainButton.isLoaderVisible); // true  
   + e- V7 |8 N) [& w. i' {1 U( O
3. 
   
4. mainButton.hideLoader();
   
5. console.log(mainButton.isLoaderVisible); // false

复制代码

活跃状态​

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

1. mainButton.enable();
   ! y. q) c7 |" d7 v" d5 y
2. console.log(mainButton.isEnabled); // true  
   
3. 
   : \1 R# F$ s# ?
4. mainButton.disable();
   ; F1 H+ b% I3 u
5. console.log(mainButton.isEnabled); // false

复制代码

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

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

1. mainButton.setBackgroundColor('#ffffaa');
   
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({
   , ~& c+ y. Q4 K& Q& Y3 D
2.   backgroundColor: '#aa1388',
   
3.   text: 'Stop',
   
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 属性