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

riyad

主题参数​

💠组件 负责 Telegram Mini Apps 主题参数。

安装​

在使用该组件之前，必须对其进行安装，以确保属性配置正确。 ，使用 mount 方法更新 isMounted 信号属性。

Variable :

1. import { themeParams } from '@telegram-apps/sdk';
   
2. 
   
3. themeParams.mount();
   
4. themeParams.isMounted(); // true

复制代码

Function :

1. import {
   
2.   mountThemeParams,
   
3.   isThemeParamsMounted,
   " L7 r. P" r, g8 T5 ^4 ^. V
4. } from '@telegram-apps/sdk';
   
5. 
   - U) m1 ]4 r' j* h- z  t
6. mountThemeParams();
   
7. isThemeParamsMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. themeParams.unmount();
   
2. themeParams.isMounted(); // false

复制代码

Functions :

1. import {
   $ c! J3 c) L" T
2.   unmountThemeParams,
   
3.   isThemeParamsMounted,
   ' O& ]. ~; y% A( I, t6 q0 @
4. } from '@telegram-apps/sdk';
   
5. 
   * b7 c  e4 q  ~0 c* `# |
6. unmountThemeParams();
   
7. isThemeParamsMounted(); // false

复制代码

绑定 CSS 变量​

该作用域允许通过 CSS 变量公开其属性。

要创建新的 CSS 变量，请使用 bindCssVars 方法。 调用时，它会更新 isCssVarsBound 信号属性。

该方法可选择接受一个函数，该函数接收驼峰格式的主题调色板键， 返回 CSS 变量名。 默认情况下，该方法使用这些规则转换调色板键：

• 将数值转换为 kebab 大小写。
• 预置 --tg-theme- 前缀。
  

( H1 R" g1 X7 H7 O) xVariable :
5 Z* n& i) [$ |5 k( D, F! o

1. themeParams.bindCssVars();
   4 L  J9 F! W$ J
2. // Creates CSS variables like:
   
3. // --tg-theme-button-color: #aabbcc
   6 _6 T3 i6 d: z8 Z/ F
4. // --tg-theme-accent-text-color: #aabbcc
   ( i  b7 \* @4 C- N
5. // --tg-theme-bg-color: #aabbcc
   & p  J2 \) \, \+ g' H
6. // ...
   / S: l2 J& u* w: j6 X4 {4 N
7. 
   1 B/ b0 `+ ?) r/ s5 \  ?
8. themeParams.bindCssVars(key => `--my-prefix-${key}`);
   & v/ F; m6 x3 [4 @+ n
9. // Creates CSS variables like:
   ( h& e) _3 C  q8 b% M+ ^+ m3 H( C
10. // --my-prefix-buttonColor: #aabbcc
    ; f0 y* W: b; |2 j
11. // --my-prefix-accentTextColor: #aabbcc
    
12. // --my-prefix-bgColor: #aabbcc
    
13. // ...
    
14. 
    4 l  w! H; }6 [( r% n7 h
15. // themeParams.isCssVarsBound() -> true

复制代码

Functions :

1. import {
   " E9 ~) P% n! u' t4 n
2.   bindThemeParamsCssVars,
   
3.   isThemeParamsCssVarsBound,
   
4. } from '@telegram-apps/sdk';
   & i9 T$ X. z4 e9 a! p% ?
5. 
   / t9 u1 L+ Z# S
6. bindThemeParamsCssVars();
   $ B. S! n* x' K5 V* Q/ C( v& C2 p
7. // Creates CSS variables like:
   / p6 ], A! D9 z, B+ M. K
8. // --tg-theme-button-color: #aabbcc
   0 H5 I6 Y9 s; O5 v
9. // --tg-theme-accent-text-color: #aabbcc
   
10. // --tg-theme-bg-color: #aabbcc
    
11. // ...
    + p6 v1 U/ D4 n0 ]% q% x
12. 
    $ U# r0 l) \+ [! D. U+ j: C
13. bindThemeParamsCssVars(key => `--my-prefix-${key}`);
    % Q. S7 J1 j! d+ C$ L
14. // Creates CSS variables like:
    
15. // --my-prefix-buttonColor: #aabbcc
    ; ?+ u) t. Z; O2 o' I% Q1 K) H
16. // --my-prefix-accentTextColor: #aabbcc
    
17. // --my-prefix-bgColor: #aabbcc
    
18. // ...
    ; H; O3 m3 ?  @- y  F2 k9 K
19. 
    
20. // isThemeParamsCssVarsBound() -> true

复制代码

属性
Variable :

1. themeParams.accentTextColor(); // RGB | undefined
   
2. themeParams.backgroundColor(); // RGB | undefined
   
3. themeParams.buttonTextColor(); // RGB | undefined
   3 [, d! z1 G8 K9 C: f
4. themeParams.buttonColor(); // RGB | undefined
   
5. themeParams.destructiveTextColor(); // RGB | undefined
   4 ~. }2 U( H. b6 c( A/ q
6. themeParams.headerBackgroundColor(); // RGB | undefined
   
7. themeParams.hintColor(); // RGB | undefined
   % p8 }9 K; ?( r
8. themeParams.linkColor(); // RGB | undefined
   7 c( u/ Y3 ^. `# M/ G8 L
9. themeParams.subtitleTextColor(); // RGB | undefined
   
10. themeParams.sectionBackgroundColor(); // RGB | undefined
    
11. themeParams.secondaryBackgroundColor(); // RGB | undefined
    ) {2 }6 Y5 L8 T1 V% r6 f
12. themeParams.sectionSeparatorColor(); // RGB | undefined
    
13. themeParams.sectionHeaderTextColor(); // RGB | undefined
    
14. themeParams.textColor(); // RGB | undefined
    . g1 z, J0 ~4 C: J: x. \
15. 
    
16. themeParams.state(); // Record<string, RGB>;

复制代码

Functions :

1. import {
   $ ^: x3 x  |6 \5 U
2.   themeParamsAccentTextColor,
   ! e: H* @# X' N, \9 B
3.   themeParamsBackgroundColor,
   
4.   themeParamsButtonTextColor,
   ' [  F- b2 [: [9 d
5.   themeParamsButtonColor,
   
6.   themeParamsDestructiveTextColor,
   & D8 t8 `( s4 L! U( [) N4 M
7.   themeParamsHeaderBackgroundColor,
   
8.   themeParamsHintColor,
   
9.   themeParamsLinkColor,
   9 u* Q( b3 _; M( l
10.   themeParamsSubtitleTextColor,
    : z; `) {# }& l4 s
11.   themeParamsSectionBackgroundColor,
    
12.   themeParamsSecondaryBackgroundColor,
    9 E9 P& s* y: W
13.   themeParamsSectionSeparatorColor,
    $ X* T3 r' F2 {2 F! \+ T8 R
14.   themeParamsSectionHeaderTextColor,
      C, U* |$ Y; b2 q+ n* j9 |
15.   themeParamsTextColor,
    
16.   themeParamsState,
    4 Y/ f) \3 i! O- \
17. } from '@telegram-apps/sdk';
    
18. 
    * }" j, z9 o6 l4 j# Z
19. themeParamsAccentTextColor(); // RGB | undefined
    
20. themeParamsBackgroundColor(); // RGB | undefined
    " E& t% y% w% Y' l
21. themeParamsButtonTextColor(); // RGB | undefined
      D. }& C! l6 X, _1 L0 ~7 b
22. themeParamsButtonColor(); // RGB | undefined
    6 M1 Z8 c( V7 i
23. themeParamsDestructiveTextColor(); // RGB | undefined
    ( P8 N! _0 s: {3 m" x
24. themeParamsHeaderBackgroundColor(); // RGB | undefined
    
25. themeParamsHintColor(); // RGB | undefined
    $ c8 t7 o9 ?3 ]& `2 o! X* h$ z& R
26. themeParamsLinkColor(); // RGB | undefined
    
27. themeParamsSubtitleTextColor(); // RGB | undefined
    " b' U) _; V, F( S6 S
28. themeParamsSectionBackgroundColor(); // RGB | undefined
    & }* F& e- {  A
29. themeParamsSecondaryBackgroundColor(); // RGB | undefined
    
30. themeParamsSectionSeparatorColor(); // RGB | undefined
    
31. themeParamsSectionHeaderTextColor(); // RGB | undefined
    
32. themeParamsTextColor(); // RGB | undefined
    1 E' P6 d& ?* c: r7 \3 z+ ^8 O
33. 
    
34. themeParamsState(); // Record<string, RGB>;

复制代码