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

riyad

主题参数​

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

安装​

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

Variable :

1. import { themeParams } from '@telegram-apps/sdk';
   / G7 P: |) v5 r2 W& e+ S
2. 
   
3. themeParams.mount();
   
4. themeParams.isMounted(); // true

复制代码

Function :

1. import {
   ! y6 d4 n$ h& n7 U# [. n
2.   mountThemeParams,
   
3.   isThemeParamsMounted,
   
4. } from '@telegram-apps/sdk';
   $ S; t" C$ z  p# s
5. 
   
6. mountThemeParams();
   
7. isThemeParamsMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. themeParams.unmount();
   , ^' d; C& G' i, E4 V
2. themeParams.isMounted(); // false

复制代码

Functions :

1. import {
   ( a2 Q/ S5 Z& x% Q" o) o  j5 Z
2.   unmountThemeParams,
   : R" H& H, G* R- a
3.   isThemeParamsMounted,
   0 }8 B( s- x8 |' v% Z3 w
4. } from '@telegram-apps/sdk';
   
5. 
   4 d3 J4 Y& S( X7 x, t
6. unmountThemeParams();
   * U+ b8 f) g+ z0 d+ W( G
7. isThemeParamsMounted(); // false

复制代码

绑定 CSS 变量​

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

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

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

• 将数值转换为 kebab 大小写。
• 预置 --tg-theme- 前缀。
  , a1 r; q0 i, D- G8 ^& C

Variable :
8 p' s# _; S& I3 v; t  n

1. themeParams.bindCssVars();
   
2. // Creates CSS variables like:
   * [- D) n% b) C7 ]; C8 V
3. // --tg-theme-button-color: #aabbcc
   - L! a" M" }7 ?' d- f
4. // --tg-theme-accent-text-color: #aabbcc
   / Q/ d0 h. i0 q
5. // --tg-theme-bg-color: #aabbcc
   ) N1 f) t; d/ q( Q
6. // ...
   
7. 
   
8. themeParams.bindCssVars(key => `--my-prefix-${key}`);
   ( o' ^! r( ^" r/ o
9. // Creates CSS variables like:
   
10. // --my-prefix-buttonColor: #aabbcc
    2 R( M% ^, t" p, \+ ]/ S
11. // --my-prefix-accentTextColor: #aabbcc
    9 t3 [! |. j" @7 R, j" o; U, f, |
12. // --my-prefix-bgColor: #aabbcc
    
13. // ...
    - Q6 ^7 O& z4 k$ \( A' W# L
14. 
    
15. // themeParams.isCssVarsBound() -> true

复制代码

Functions :
1 y9 d2 p& K0 H' h) J" P. U" T$ O7 C

1. import {
   ( u/ f, T. s2 |
2.   bindThemeParamsCssVars,
   2 z2 S" a9 W# A7 s) T0 q
3.   isThemeParamsCssVarsBound,
   
4. } from '@telegram-apps/sdk';
   & n  \  e: P" o4 D& V" j8 e; B" s
5. 
   
6. bindThemeParamsCssVars();
   . ?0 a: r; N. n; p( a
7. // Creates CSS variables like:
   
8. // --tg-theme-button-color: #aabbcc
   7 M& t1 ^$ ~( R4 k- K+ x4 k' M
9. // --tg-theme-accent-text-color: #aabbcc
   
10. // --tg-theme-bg-color: #aabbcc
    
11. // ...
    ' X& o: |, d0 ?
12. 
    8 ^# h; \0 d5 c
13. bindThemeParamsCssVars(key => `--my-prefix-${key}`);
    
14. // Creates CSS variables like:
    
15. // --my-prefix-buttonColor: #aabbcc
    
16. // --my-prefix-accentTextColor: #aabbcc
    
17. // --my-prefix-bgColor: #aabbcc
    / m( m6 ]& R; B, a
18. // ...
    ) R% }+ y- }; j6 O2 B3 R; i
19. 
    
20. // isThemeParamsCssVarsBound() -> true

复制代码

属性
& v: q6 q: L1 E8 w( hVariable :
: c0 f/ B' S7 E- W5 s

1. themeParams.accentTextColor(); // RGB | undefined
   + a8 G: Z, m1 `2 `) H& N, w% d
2. themeParams.backgroundColor(); // RGB | undefined
   
3. themeParams.buttonTextColor(); // RGB | undefined
   
4. themeParams.buttonColor(); // RGB | undefined
   ! I% w& X: R9 ~) A/ D1 v) |% i6 M
5. themeParams.destructiveTextColor(); // RGB | undefined
   : t$ R) p4 I0 R6 I- H
6. themeParams.headerBackgroundColor(); // RGB | undefined
   % z6 P; |3 H& j8 [# S4 y
7. themeParams.hintColor(); // RGB | undefined
   2 {' \% S7 S" _0 t! i
8. themeParams.linkColor(); // RGB | undefined
   
9. themeParams.subtitleTextColor(); // RGB | undefined
   
10. themeParams.sectionBackgroundColor(); // RGB | undefined
    
11. themeParams.secondaryBackgroundColor(); // RGB | undefined
    9 E# p9 B. ]! E' a- f- n# r
12. themeParams.sectionSeparatorColor(); // RGB | undefined
    ( ]( W% L3 J" _: v0 \7 h' J+ f, N
13. themeParams.sectionHeaderTextColor(); // RGB | undefined
    
14. themeParams.textColor(); // RGB | undefined
    
15. 
    
16. themeParams.state(); // Record<string, RGB>;

复制代码

Functions :

1. import {
   8 {+ E% P( b; n' y
2.   themeParamsAccentTextColor,
   
3.   themeParamsBackgroundColor,
   9 R# a' z4 v4 K% h1 \
4.   themeParamsButtonTextColor,
   
5.   themeParamsButtonColor,
   
6.   themeParamsDestructiveTextColor,
   9 f* k0 ]1 W/ z; k
7.   themeParamsHeaderBackgroundColor,
   - E& X% [" x" C, E
8.   themeParamsHintColor,
   0 l6 {3 L$ r, I: s
9.   themeParamsLinkColor,
   5 Y, y; D& _; Q, y+ Z/ _* T6 v
10.   themeParamsSubtitleTextColor,
    2 Z+ v0 P* f: q7 k+ T
11.   themeParamsSectionBackgroundColor,
    
12.   themeParamsSecondaryBackgroundColor,
    $ q' W" P; H% v
13.   themeParamsSectionSeparatorColor,
    
14.   themeParamsSectionHeaderTextColor,
    & v' M, \8 N" ?' `' g- ~
15.   themeParamsTextColor,
    
16.   themeParamsState,
    1 j7 N% _6 k# E" R8 {  s( H
17. } from '@telegram-apps/sdk';
    
18. 
    - U  h- M8 s# g* m% H
19. themeParamsAccentTextColor(); // RGB | undefined
    ; D/ f2 S" A7 l+ @
20. themeParamsBackgroundColor(); // RGB | undefined
    
21. themeParamsButtonTextColor(); // RGB | undefined
    
22. themeParamsButtonColor(); // RGB | undefined
    
23. themeParamsDestructiveTextColor(); // RGB | undefined
    
24. themeParamsHeaderBackgroundColor(); // RGB | undefined
    
25. themeParamsHintColor(); // RGB | undefined
    , y( D. c0 R! i/ y' g7 l+ N: X
26. themeParamsLinkColor(); // RGB | undefined
    
27. themeParamsSubtitleTextColor(); // RGB | undefined
    2 C' r# }( F7 A' l% v
28. themeParamsSectionBackgroundColor(); // RGB | undefined
    
29. themeParamsSecondaryBackgroundColor(); // RGB | undefined
    / j  m' h4 Q% b' c. g3 M
30. themeParamsSectionSeparatorColor(); // RGB | undefined
    3 ^6 v+ x$ h% _6 M1 I1 U! t
31. themeParamsSectionHeaderTextColor(); // RGB | undefined
    $ k1 K3 P/ {* j
32. themeParamsTextColor(); // RGB | undefined
    0 e4 c; Q. }* ~5 P. G4 @! Q/ o$ T
33. 
    $ m9 k6 I5 a; W! o9 ^% g; |5 |) V9 Z$ z
34. themeParamsState(); // Record<string, RGB>;

复制代码

8 {! Z$ D* N: N" c. i* a
2 D' f- h1 |$ Z* Y