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

riyad

主题参数​

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

初始化​

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

1. import { initThemeParams } from '@telegram-apps/sdk';
   " }8 g( t0 S0 W' l; |9 H$ r  e
2. 
   
3. const [themeParams] = initThemeParams();

复制代码

索取实际数据​

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

1. import { requestThemeParams } from '@telegram-apps/sdk';
   / E# \/ B" }/ Q! |3 T
2. 
   
3. requestThemeParams.then(console.log);
   
4. 
   
5. // Output:
   5 o$ }! d! U: \! j
6. // { bgColor: '#ffaabb', ... }

复制代码

颜色​

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

1. themeParams.get('bgColor');
   5 Q: w7 @* e5 v7 V
2. themeParams.get('packageUnknownColor');

复制代码

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

1. themeParams.getState();
   : o3 N7 ^7 K, |; G6 C/ Z
2. // Output:
   
3. // {
   * T9 i! [' M: ?9 G( P0 t! W$ \4 ^1 c( N
4. //   accentTextColor: '#aa1399',
   
5. //   bgColor: '#baac12',
   
6. //   linkColor: '#887722'
   1 |- |$ x# [: W: ~( f
7. //   packageUnknownColor: '#676767,
   # r& `/ T# d$ {' [
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
  4 x, m3 R" P, T! U9 q1 S2 ^% H4 p. b

例如

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

复制代码

事件​

可被 跟踪 的事件列表：

  W1 \0 a5 ]; m& M

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