Telegram 小程序 | TypeScript @telegram-apps/sdk @1.x | 组件 | 主题参数

riyad

主题参数​

该组件包含 Telegram 应用程序当前使用的 主题 信息。

初始化​

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

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

复制代码

索取实际数据​

要获取实际的主题参数信息，开发人员可以使用 requestThemeParams 函数：

1. import { requestThemeParams } from '@telegram-apps/sdk';
   0 ]$ J4 @/ k$ J- n$ h- @6 H
2. 
   0 q- |8 v$ ^0 j& A8 _- q, n/ K8 R
3. requestThemeParams.then(console.log);
   
4. 
   
5. // Output:
   
6. // { bgColor: '#ffaabb', ... }

复制代码

颜色​

开发人员可以使用 get 方法获取主题颜色：

1. themeParams.get('bgColor');
   0 b4 e: C) H* e. ?
2. themeParams.get('packageUnknownColor');

复制代码

要通过一个对象获取所有颜色，请使用 getState 方法：

1. themeParams.getState();
   
2. // Output:
   
3. // {
   
4. //   accentTextColor: '#aa1399',
   
5. //   bgColor: '#baac12',
   
6. //   linkColor: '#887722'
   
7. //   packageUnknownColor: '#676767,
   , Y" H& F. m& F
8. // }

复制代码

ThemeParams 组件可直接访问颜色列表：

• accentTextColor: RGB | undefined
• bgColor: RGB | undefined
• buttonColor: RGB | undefined
• buttonTextColor: RGB | undefined
• destructiveTextColor: RGB | undefined
• headerBgColor: RGB | undefined
• hintColor: RGB | undefined
• linkColor: RGB | undefined
• secondaryBgColor: RGB | undefined
• sectionBgColor: RGB | undefined
• sectionHeaderTextColor: RGB | undefined
• subtitleTextColor: RGB | undefined
• textColor: RGB | undefined
  

例如

1. themeParams.accentTextColor; // '#aa1399'

复制代码

0 [& G' B+ P# C7 @
事件​

可被 跟踪 的事件列表：

( |. v2 y% l/ \) @9 a

事件	监听器	触发条件
change	() => void	组件中的某些部分发生了变化
change:{theme_key}	(value: RGB) => void	更改指定键的颜色

! f' z1 I9 C* D  }6 Z