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

riyad

主题参数​

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

初始化​

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

1. import { initThemeParams } from '@telegram-apps/sdk';
   7 d: i2 ~7 [' u) ?; s
2. 
   ) N) r# K5 O$ t( p) x7 z7 @. ~
3. const [themeParams] = initThemeParams();

复制代码

索取实际数据​

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

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

复制代码

颜色​

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

1. themeParams.get('bgColor');
   4 ^9 r. p  {( v
2. themeParams.get('packageUnknownColor');

复制代码

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

1. themeParams.getState();
   4 H8 }3 K. q& `" q6 P4 s3 H$ ]0 G
2. // Output:
   
3. // {
   ' F2 \; w1 Z- ^! Y' a9 A3 r
4. //   accentTextColor: '#aa1399',
   ; u2 w& P. C; P  [
5. //   bgColor: '#baac12',
     \" g2 h3 l' `! \; y
6. //   linkColor: '#887722'
   & V9 ?* u6 D/ z, Y" O! I( }
7. //   packageUnknownColor: '#676767,
   , M/ ~9 ?  C( ?! @
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
  

例如
& q9 N1 y. q' H2 g7 {  f$ j/ B

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

复制代码

: [3 ]. d0 P- r, ]( t6 G" {, p
事件​

可被 跟踪 的事件列表：

$ N, R8 z6 h( v- l" s

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

' H& z; d! ~2 c1 A( X8 [$ C