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';
   
2. 
   $ I( t- g9 ^0 p0 T( S0 w
3. requestThemeParams.then(console.log);
   
4. 
   
5. // Output:
   
6. // { bgColor: '#ffaabb', ... }

复制代码

颜色​

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

1. themeParams.get('bgColor');
   - V7 R! B* _0 T
2. themeParams.get('packageUnknownColor');

复制代码

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

1. themeParams.getState();
   7 V% a+ I; ~+ F+ c7 Y# L* K" F7 X
2. // Output:
   
3. // {
   
4. //   accentTextColor: '#aa1399',
   / \6 w, A% ^1 R3 G. W& w* |3 K5 e+ i
5. //   bgColor: '#baac12',
   
6. //   linkColor: '#887722'
   1 D! f: q- H- s' u) Y2 r
7. //   packageUnknownColor: '#676767,
   
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
  

# m, @; q6 m  i+ d' I例如
( K1 w3 Z8 u5 H6 k- D# C& t/ ~. w

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

复制代码

  \0 Z; {$ Y, \: T. c- p' D
$ }+ ?) @* B) |0 _事件​

可被 跟踪 的事件列表：

6 _) {. @; Y$ a4 h5 U. O1 L/ e: ?

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

  ~5 t) |  e, p: _4 `; D6 h