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

riyad

主题参数​

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

安装​

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

Variable :

1. import { themeParams } from '@telegram-apps/sdk';
   
2. 
   2 w2 S1 v# ]9 C2 C, u
3. themeParams.mount();
   
4. themeParams.isMounted(); // true

复制代码

Function :

1. import {
   3 a$ V1 y: [; R& l3 C% D' R
2.   mountThemeParams,
   , t) c/ m+ O& K$ L  i7 x' R/ L' e
3.   isThemeParamsMounted,
   
4. } from '@telegram-apps/sdk';
   
5. 
   2 b5 T8 [& S  B/ D
6. mountThemeParams();
   8 D& j7 m! P% S0 D
7. isThemeParamsMounted(); // true

复制代码

, f  y4 h. R9 v/ n# r

要卸载，请使用 unmount 方法：

Variable :

1. themeParams.unmount();
     [! w: ~9 q/ @" C  y4 d9 }
2. themeParams.isMounted(); // false

复制代码

Functions :

1. import {
   ) e9 ~1 d: d7 a. f' ]) u1 @" O
2.   unmountThemeParams,
   ; K7 G1 r3 H( J- Z) L" r) M( b
3.   isThemeParamsMounted,
   
4. } from '@telegram-apps/sdk';
   
5. 
   
6. unmountThemeParams();
   , j, ~6 g8 s7 _) ^0 Z/ }
7. isThemeParamsMounted(); // false

复制代码

绑定 CSS 变量​

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

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

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

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

. ~8 Y! P/ k5 Z6 m5 c0 N6 \Variable :

1. themeParams.bindCssVars();
   
2. // Creates CSS variables like:
   
3. // --tg-theme-button-color: #aabbcc
   
4. // --tg-theme-accent-text-color: #aabbcc
   
5. // --tg-theme-bg-color: #aabbcc
   % V  V1 G" f( f! x% c" C$ p. _
6. // ...
   
7. 
   
8. themeParams.bindCssVars(key => `--my-prefix-${key}`);
   
9. // Creates CSS variables like:
   
10. // --my-prefix-buttonColor: #aabbcc
    
11. // --my-prefix-accentTextColor: #aabbcc
    : m- t: n6 l2 X5 Q) T
12. // --my-prefix-bgColor: #aabbcc
    
13. // ...
    : Z. s; U5 [% |) |
14. 
    
15. // themeParams.isCssVarsBound() -> true

复制代码

Functions :
2 y7 V' F- f0 a/ |4 g# b

1. import {
   
2.   bindThemeParamsCssVars,
   
3.   isThemeParamsCssVarsBound,
   
4. } from '@telegram-apps/sdk';
   , u* {) I- q4 J, I/ w( n; j
5. 
   
6. bindThemeParamsCssVars();
   
7. // Creates CSS variables like:
   / x( i! u& r& f' W4 r: j& n
8. // --tg-theme-button-color: #aabbcc
   , z& `* a3 v  v) Q+ w- o) f
9. // --tg-theme-accent-text-color: #aabbcc
   
10. // --tg-theme-bg-color: #aabbcc
    + \, T6 O( w. X9 \$ T' K
11. // ...
    
12. 
    1 E& R8 c: u: c
13. bindThemeParamsCssVars(key => `--my-prefix-${key}`);
    1 _5 ^: B3 \' S2 m" w
14. // Creates CSS variables like:
    
15. // --my-prefix-buttonColor: #aabbcc
    
16. // --my-prefix-accentTextColor: #aabbcc
    * S- n' ^' K& D/ n
17. // --my-prefix-bgColor: #aabbcc
    ' a0 V0 G& J/ k9 _1 y
18. // ...
    6 L: J- n0 K* c: J* M9 i
19. 
    
20. // isThemeParamsCssVarsBound() -> true

复制代码

属性
Variable :
, h, j! Y! F. @4 _% Q1 c6 }2 Z

1. themeParams.accentTextColor(); // RGB | undefined
   
2. themeParams.backgroundColor(); // RGB | undefined
   * t$ J3 r* }; K3 d8 j7 g* B- S4 O' D; \
3. themeParams.buttonTextColor(); // RGB | undefined
   4 Q3 G) N- H. g- {" J2 j9 X1 `* l
4. themeParams.buttonColor(); // RGB | undefined
   . p- d; ]1 Y' C/ e, m
5. themeParams.destructiveTextColor(); // RGB | undefined
   7 Q6 [4 ?2 }' B: D0 T2 Q4 Q" g
6. themeParams.headerBackgroundColor(); // RGB | undefined
   
7. themeParams.hintColor(); // RGB | undefined
   + }8 p! S( K8 s
8. themeParams.linkColor(); // RGB | undefined
   
9. themeParams.subtitleTextColor(); // RGB | undefined
   
10. themeParams.sectionBackgroundColor(); // RGB | undefined
    ; U: s8 u& J$ l" z* c
11. themeParams.secondaryBackgroundColor(); // RGB | undefined
    / d) Y2 N' A8 }1 {! W6 \
12. themeParams.sectionSeparatorColor(); // RGB | undefined
    7 l( y3 }6 X; u5 D. P
13. themeParams.sectionHeaderTextColor(); // RGB | undefined
    
14. themeParams.textColor(); // RGB | undefined
    
15. 
    7 |4 _# i4 [" _/ l* z, x2 t
16. themeParams.state(); // Record<string, RGB>;

复制代码

Functions :
; B& H* ?7 H4 B) `& T1 x! |+ O

1. import {
   
2.   themeParamsAccentTextColor,
   ! k& d8 r1 M. a
3.   themeParamsBackgroundColor,
   6 w6 ?# @7 f/ X, y& {2 t
4.   themeParamsButtonTextColor,
   % X; t' G; {7 m( p, K) r: y
5.   themeParamsButtonColor,
   5 r7 y( o% R1 e  d5 Y2 d* |  F
6.   themeParamsDestructiveTextColor,
   
7.   themeParamsHeaderBackgroundColor,
   
8.   themeParamsHintColor,
   % U: Z. ?) @/ v# {" f
9.   themeParamsLinkColor,
     h1 A7 P% L7 i6 C1 d+ }
10.   themeParamsSubtitleTextColor,
    
11.   themeParamsSectionBackgroundColor,
    ! f2 v5 }3 o4 E( s! b7 _  T
12.   themeParamsSecondaryBackgroundColor,
    
13.   themeParamsSectionSeparatorColor,
    / r* R* o, h# W0 y
14.   themeParamsSectionHeaderTextColor,
    
15.   themeParamsTextColor,
    
16.   themeParamsState,
    
17. } from '@telegram-apps/sdk';
    
18. 
    
19. themeParamsAccentTextColor(); // RGB | undefined
    
20. themeParamsBackgroundColor(); // RGB | undefined
    1 }7 {$ [( v+ h, k. O! x
21. themeParamsButtonTextColor(); // RGB | undefined
    - i% Z/ f# z! @' Y0 y, A" T
22. themeParamsButtonColor(); // RGB | undefined
    
23. themeParamsDestructiveTextColor(); // RGB | undefined
    
24. themeParamsHeaderBackgroundColor(); // RGB | undefined
    
25. themeParamsHintColor(); // RGB | undefined
    , c9 L# S  Y* S, D/ N
26. themeParamsLinkColor(); // RGB | undefined
    , t6 Z/ R+ o/ R9 r
27. themeParamsSubtitleTextColor(); // RGB | undefined
    & h% v/ [6 z- c% i1 L# z4 F9 u
28. themeParamsSectionBackgroundColor(); // RGB | undefined
    
29. themeParamsSecondaryBackgroundColor(); // RGB | undefined
    
30. themeParamsSectionSeparatorColor(); // RGB | undefined
    
31. themeParamsSectionHeaderTextColor(); // RGB | undefined
    
32. themeParamsTextColor(); // RGB | undefined
    
33. 
    ; a) ~- V) N2 v: ~' ~# A
34. themeParamsState(); // Record<string, RGB>;

复制代码

- c* P- @4 j& X  L- b( [