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

riyad

主题参数​

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

初始化​

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

1. import { initThemeParams } from '@telegram-apps/sdk';
   : Z& J0 X# c' `4 J! b* }' n% T
2. 
   ! L9 @) n: s5 Y/ A7 _
3. const [themeParams] = initThemeParams();

复制代码

索取实际数据​

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

1. import { requestThemeParams } from '@telegram-apps/sdk';
   
2. 
   
3. requestThemeParams.then(console.log);
   
4. 
   
5. // Output:
   
6. // { bgColor: '#ffaabb', ... }

复制代码

颜色​

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

1. themeParams.get('bgColor');
   
2. themeParams.get('packageUnknownColor');

复制代码

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

1. themeParams.getState();
   : W0 ~9 T, r2 N7 K
2. // Output:
   
3. // {
   
4. //   accentTextColor: '#aa1399',
   
5. //   bgColor: '#baac12',
   
6. //   linkColor: '#887722'
   # i* X+ \0 o( x: I! G
7. //   packageUnknownColor: '#676767,
   ( Z8 l' G% e9 _  j% ]8 e0 k
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
  

例如
) N6 a0 ^$ g9 i" T' m

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

复制代码

' ~" T2 ~: h6 c* A8 _% w事件​

可被 跟踪 的事件列表：

1 I' ^! `, V; E; D

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